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Exercise example 

The only purpose of this module is to allow experimentation with an 
example of an Exercise tag. In particular, I need to know how the Exercise 
is treated in the downloadable PDF and HTML versions. 

Exercise Example 


Put cnxml code for an exercise here after the cnxml file is created. 
Exercise: 


Problem: What is the capital of Texas? 
Solution: 


Austin is the capital of Texas. 


-end- 
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Preface 


This module is one of a series of modules designed to teach you about 
Object-Oriented Programming (OOP) using Java. 


The program described in this module requires the use of the Guzdial- 
Ericson multimedia class library. You will find download, installation, and 
usage instructions for the library at Java OOP: The Guzdial-Ericson 
Multimedia Class Library. 


This document was created using Apache OpenOffice Writer and then 
translated to CNXML suitable for uploading and publishing on OpenStax. 


Viewing tip 


I recommend that you open another copy of this module in a separate 
browser window and use the following links to easily find and view the 
Figures and Listings while you are reading about them. 


Figures 


e Figure 1. The required graphic output image. 
e Figure 2. Required output on the command line screen. 


Listings 


e Listing 1. Modification to load a jpg file by default. 

e Listing 2. Original array containing turtle colors. 

e Listing 3. Modified array of turtle colors. 

e Listing 4. Change the initial heading. 

e Listing 5. Source code for driver class named Prob01. 

e Listing 6. Source code for the modified World class. 

e Listing 7. Source code for the modified SimpleTurtle class. 


Preview 


Program specifications 


Write a program named Prob01 that uses the class definition shown in 
Listing 5 and Ericson's media library along with the image file named 
Prob01.jpg to produce the graphic output image shown in Figure 1 . 


Note: 
Figure 1. The required graphic output image. 


Dick Baldwin 


No new classes 


You may not define any new classes to cause your program to behave as 
required, and you may not modify the class definition for the class named 
Prob01 given in Listing 5. You must copy and modify (if necessary) the 
following media classes to cause your program to produce the required 
output: 


e World.java 


e Turtle.java 
e SimpleTurtle.java 


Files in your folder 


Your folder must contain only the following class files, source-code files, 
and image files: 


e Prob01.class 

e Prob01.java 

e Prob01.jpg 

e SimpleTurtle.class 
e SimpleTurtle.java 
e Turtle.class 

e Turtle.java 

e World.class 

e World.java 


In addition to the output image described above, your program must 
produce the output text on the command- line screen shown in Figure 2 . 


Output text 


In addition to the output image described above, your program must 
produce the output text on the command- line screen shown in Figure 2 . 


Note: 
Figure 2. Required output on the command line screen. 


Dick Baldwin 
Picture, filename Prob01.jpg height 274 width 365 
Dick Baldwin 
Dick Baldwin 
Dick Baldwin 
Dick Baldwin 


You must substitute your name for mine wherever my name appears in the 
image and on the command-line screen. 


An analysis 


As is often the case, the real challenge with this problem is to decide what 
needs to be done to satisfy the specifications. 


Required modifications 


By comparing the default behavior of the World and SimpleTurtle classes 
with the requirements of this program, it can be determined that the 
following modifications to the World and SimpleTurtle classes are 
required to meet the specifications. (Modification of the Turtle class is not 
required) : 


e Modify the World class to load a picture named Prob01.jpg as the 
default background for the world in place of the all-white Picture 
object. 

¢ Modify the World class to display the student's name near the top of 
the image. 

¢ Modify the World class to display the student's name and information 
about the picture on the command-line screen. 

e¢ Modify the SimpleTurtle class to change the initial heading for new 
turtle objects to northeast instead of north. 

¢ Modify the SimpleTurtle class to change the order in which colors are 
assigned to new turtles as they are instantiated. 


Discussion and sample code 


Modifications to the World class 


Ericson's World class was modified to cause it to load a jpg file by default 
instead of displaying a blank picture by default. It was also modified to 
cause it to display text on the background image and to display text on the 
command line screen. These changes are reflected in Figure 1 and Figure 2 . 


A complete listing of the modified World class is shown in Listing 6 . 


Modifying the code 


The code used to accomplish the modifications described above is shown in 
Listing 1. 


Note: 
Listing 1. Modification to load a jpg file by default. 


//create the background picture 
//picture = new Picture(width, height ); 


picture = new Picture("Prob01. jpg"); 
picture.addMessage("Dick Baldwin",10, 20); 
System.out.printin(picture); 


Note that one original statement was disabled and replaced by three new 
statements. 


In addition, several other println statements were added at strategic 
locations within the World and SimpleTurtle classes (not shown here) to 
cause the student's name to appear multiple times in the text output shown 
in Figure 2 . 


Meeting the requirements 


These modifications to the World and SimpleTurtle classes met the 
following requirements established earlier under An analysis . 


e Modify the World class to load a picture named Prob01.jpg as the 
default background for the world in place of the all-white Picture 


object. 

¢ Modify the World class to display the student's name near the top of 
the image. 

e Modify the World class to display the student's name and information 
about the picture on the command-line screen. 


Modifications to the SimpleTurtle class 


The SimpleTurtle class was modified to change the order in which colors 
are assigned to new turtle objects and to change the initial heading of the 
turtle from north to northeast. 


A complete listing of the modified SimpleTurtle class is shown in Listing 7 
near the end of the module. 


Change the order of color assignment 
Listing 2 declares and initializes an array of color data that is used in the 


original version of the SimpleTurtle class to assign colors to the turtles on 
a cyclical basis as they are instantiated. 


Note: 
Listing 2. Original array containing turtle colors. 


/** array of colors to use for the turtles */ 
private static Color[] colorArray = 
{ Color.green, 
Color.cyan, 
new Color(204,0, 204), 
Color.gray}; 


Listing 3 declares and initializes a modified version of the array of color 
data that is used to assign colors to the turtles as they are instantiated. 


Note: 
Listing 3. Modified array of turtle colors. 


/** array of colors to use for the turtles */ 
private static Color[] colorArray = 
{ Color.cyan, 
new Color(204,0, 204), 
Color.green, 
Color.gray}; 


Determining which color to use 


The code that assigns colors to the turtles as they are instantiated keeps 
track of the number of turtle objects that have been instantiated. 


An index is computed as the turtle count modulus the length of the array. 


The colors are extracted from the array on a cyclical basis as more and 
more turtle objects are instantiated. 


Each time the number of turtles is evenly divisible by the length of the 
array, the index used to access colors from the array starts over at zero. 


Meeting the requirements again 


This modification to the SimpleTurtle class accomplished the following 
requirement established earlier under. 


¢ Modify the SimpleTurtle class to change the order in which colors are 
assigned to new turtles as they are instantiated. 


Change the initial heading 


Listing 4 modifies the initialization value for a variable named heading , 
which is used to establish the direction that the turtle is facing. 


Note: 
Listing 4. Change the initial heading. 


/** heading angle */ 

//THIS IS A MODIFICATION 

//private double heading = 0;//default faces 
north 

private double heading = 45;// default faces 
northeast 


The default direction in the original version of the class is due north or zero 
degrees. The modified default direction is northeast or 45 degrees. 


Once again, meeting the requirements 


This modification to the SimpleTurtle class accomplished the following 
requirement established earlier under An analysis . 


e¢ Modify the SimpleTurtle class to change the initial heading for new 
turtle objects to northeast instead of north. 


That completes the required modifications that were established under An 
analysis . 


Run the program 


I encourage you to copy the code from Listing 5, Listing 6, and Listing 7. 
Compile the code and execute it. Experiment with the code, making 
changes, and observing the results of your changes. Make certain that you 
can explain why your changes behave as they do. 


Click Prob01.jpg to download the required input image file. 


Summary 


You learned how to make simple modification to the World and 
SimpleTurtle classes that modify how a program that uses Ericson's library 
behaves. 


What's next? 


This module dealt with modifications to the World and SimpleTurtle 
Classes. The next module will deal with modifications to the Turtle and 
SimpleTurtle Classes. 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: 
Housekeeping material 


e Module name: Java OOP: Modifying the World and SimpleTurtle 
Classes 
e File: Java3102.odt 


e Published: zz 


Note: 

Disclaimers: 

Although the OpenStax site makes it possible for you to download a PDF 
file for this module at no charge, and also makes it possible for you to 
purchase a pre-printed version of the PDF file, you should be aware that 
some of the HTML elements in this module may not translate well into 
PDF. 

I also want you to know that, I receive no financial compensation from the 
OpenStax website even if you purchase the PDF version of the module. 

In the past, unknown individuals have copied my modules from OpenStax, 
converted them to Kindle books, and placed them for sale on Amazon.com 
showing me as the author. I neither receive compensation for those sales 
nor do I know who does receive compensation. If you purchase such a 
book, please be aware that it is a copy of a module that is freely available 
on OpenStax and that it was made and published without my prior 
knowledge. 


Complete program listings 


Complete listings of the classes discussed in this module are shown in 
Listing 5, Listing 6, and Listing 7 below. 


Note: 
Listing 5. Source code for driver class named Prob01. 


public class Probo1{ 
public static void main(String[] args) { 
World mars = new World(200, 250); 


Turtle joe = new Turtle(mars); 
joe.forward(); 
Turtle bill = new Turtle(mars); 
bill.moveTo(50,125); 
Turtle sue = new Turtle(mars); 
sue.moveTo(150,125); 
Turtle tom = new Turtle(mars); 
tom.moveTo(100, 225); 
}//end main method 
}//end class Prob0o1 


Note: 
Listing 6. Source code for the modified World class. 


import javax.swing.*; 
import java.util.List; 
import java.util.ArrayList; 
import java.util.Iterator; 
import java.util.Observer; 
import java.awt.”; 


/*Note, this version of the World class was 
modified to 

* cause it to load a jpg file by default instead 
of 

* displaying a blank picture by default. 12/23/08 
pee 


fur 
* Class to represent a 2d world that can hold 
turtles and 


* 
* 
* 
* 


ee 
pu 
Mo 


// 


ch 


Ar 


display them 


Copyright Georgia Institute of Technology 2004 
@author Barb Ericson ericson@cc.gatech.edu 


blic class World extends JComponent implements 
delDisplay 


IIITISIISISIS///// ~Fields 
IITTISISSISISSSS SSIS 


/** should automatically repaint when model 
anged */ 
private boolean autoRepaint = true; 


/** the background color for the world */ 
private Color background = Color.WHITE; 


/** the width of the world */ 
private int width = 640; 


/** the height of the world */ 
private int height = 480; 


/** the list of turtles in the world */ 
private List<Turtle> turtleList = new 
rayList<Turtle>(); 


/** the JFrame to show this world in */ 
private JFrame frame = new JFrame("World"); 


/** background picture */ 
private Picture picture = null; 


III/1/S/1///////////7 “the constructors 


IITTISISISSS SSS 


Toe 
* Constructor that takes no arguments 
ys 
public World() 
i 
// set up the world and make it visible 
initWorld(true); 


i 


Sa 
* Constructor that takes a boolean to 
* say if this world should be visible 
* or not 
* @param visibleFlag if true will be visible 
* else if false will not be visible 
a7 
public World(boolean visibleFlag) 


initWorld(visibleFlag) ; 
} 


fre 
* Constructor that takes a width and height for 
this 
* world 
* @param w the width for the world 
* @param h the height for the world 


iy 
public World(int w, int h) 
" 

width = w; 

height = h; 


System.out.printiln( "Dick Baldwin"); 
// set up the world and make it visible 
initWorld(true); 


IIIIISI1/1S////// methods 
TITTISISSISSISSSSSSSS SSSI SSS 


YE 
* Method to initialize the world 
* @param visibleFlag the flag to make the world 
* visible or not 
roe 
private void initWorld(boolean visibleFlag ) 


// set the preferred size 
this.setPreferredSize(new 
Dimension(width, height) ); 


// create the background picture 

//THIS IS A MODIFICATION 

//picture = new Picture(width, height); 
picture = new Picture("Prob01.jpg"); 
picture.addMessage("Dick Baldwin",10, 20); 
System.out.println(picture); 


// add this panel to the frame 
frame.getContentPane().add(this); 


// pack the frame 
frame.pack(); 


// show this world 
frame.setVisible(visibleFlag) ; 


} 


oe 
* Method to get the graphics context for 
drawing on 
* @return the graphics context of the 
background picture 


aa 
public Graphics getGraphics() { return 
picture.getGraphics(); } 


YF 
* Method to clear the background picture 
wy 
public void clearBackground() { picture = new 
Picture(width, height); } 


ies 
* Method to get the background picture 
* @return the background picture 
re 
public Picture getPicture() { return picture; } 


1 es 
* Method to set the background picture 
* @param pict the background picture to use 
we 


public void setPicture(Picture pict) { picture = 
pict; } 


Joe 
* Method to paint this component 
* @param g the graphics context 
ays 


public synchronized void paintComponent(Graphics 
g) 


{ 
Turtle turtle = null; 


// draw the background image 
g.drawImage(picture.getImage(),0,0,null); 


// loop drawing each turtle on the background 
image 


Iterator iterator = turtleList.iterator(); 
while (iterator.hasNext() ) 


turtle = (Turtle) iterator.next(); 
turtle.paintComponent(g); 
} 
7 


Tim 
* Metod to get the last turtle in this world 
* @return the last turtle added to this world 
nye 

public Turtle getLastTurtle() 

{ 
return (Turtle) 

turtleList.get(turtleList.size() - 1); 


} 


ft 
* Method to add a model to this model displayer 
* @param model the model object to add 
ue 

public void addModel(Object model) 


turtleList.add((Turtle) model); 
if (autoRepaint ) 
repaint(); 


Ves 
* Method to check if this world contains the 
passed 
* turtle 
* @return true if there else false 
Pv 
public boolean containsTurtle(Turtle turtle) 


return (turtleList.contains(turtle) ); 


} 


pe 
* Method to remove the passed object from the 
world 
* @param model the model object to remove 
me 
public void remove(Object model) 


turtleList.remove(model) ; 


J 


Tia 
* Method to get the width in pixels 
* @return the width in pixels 
+7 
public int getWidth() { return width; } 


ys 
* Method to get the height in pixels 
* @return the height in pixels 
ws 
public int getHeight() { return height; } 


Tess 
* Method that allows the model to notify the 
display 
Bhs 
public void modelChanged( ) 


if (autoRepaint ) 
repaint(); 


ere 


* Method to set the automatically repaint flag 
* @param value if true will auto repaint 
ways 
public void setAutoRepaint(boolean value) { 
autoRepaint = value; } 


Yee 
* Method to hide the frame 
Pee 
// public void hide() 
Vf OX 
Vee frame.setVisible(false) ; 
// } 


SO 
* Method to show the frame 
re 
// public void show() 
gaat 
// frame.setVisible(true); 


pre 
* Method to set the visibility of the world 
* @param value a boolean value to say if should 
show or hide 


Bye 
public void setVisible(boolean value) 
i 
frame.setVisible(value) ; 
i 
Vis: 


* Method to get the list of turtles in the 
world 

* @return a list of turtles in the world 

Pay: 


public List getTurtleList() 
{ return turtleList;} 


Fre 
* Method to get an iterator on the list of 
turtles 
* @return an iterator for the list of turtles 
ware 
public Iterator getTurtleIterator() 
{ return turtleList.iterator();} 


Lae 
* Method that returns information about this 
world 
* in the form of a string 
* @return a string of information about this 
world 
nA 
public String toString() 


i 
return "A " + getWidth() + " by " + 
getHeight() + 
" world with " + turtleList.size() + " 
turtles in it."; 


} 
} // end of World class 


Note: 
Listing 7. Source code for the modified SimpleTurtle class. 


import javax.Swing.*; 


import java.awt.*; 

import java.awt.font.*; 
import java.awt.geom.*; 
import java.util.Observer; 
import java.util.Random; 


/*Note: This class was modified to change the 
order of the 

* colors used for new turtle objects as well as 
the 

* initial heading for the turtle. 12/23/08 

a7, 


W dishes 

*Class that represents a Logo-style turtle. The 
turtle 

* starts off facing north. 

* A turtle can have a name, has a starting x and y 
position, 

* has a heading, has a width, has a height, has a 
visible 

* flag, has a body color, can have a shell color, 
and has a pen. 

* The turtle will not go beyond the model display 
or picture 

* boundaries. 

* 

* You can display this turtle in either a picture 
or in 

* a class that implements ModelDisplay. 

* 

* Copyright Georgia Institute of Technology 2004 
* @author Barb Ericson ericson@cc.gatech.edu 

ues 

public class SimpleTurtle 


IIIIISIISIISI/S//// = Fields 


IITIISISSISISSSSSS SSIS SS 


/** count of the number of turtles created */ 
private static int numTurtles = 0; 


/** array of colors to use for the turtles */ 

//THIS IS A MODIFICATION 

//THE ORDER OF THE COLORS IN THE ARRAY HAS BEEN 
MODIFIED 

private static Color[] colorArray = { 
Color.cyan, new Color(204,0,204),Color.green, 
Color.gray}; 


/** who to notify about changes to this turtle 
ay 
private ModelDisplay modelDisplay = null; 


/** picture to draw this turtle on */ 
private Picture picture = null; 


/** width of turtle in pixels */ 
private int width = 15; 


/** height of turtle in pixels */ 
private int height = 18; 


/** current location in x (center) */ 
private int xPos = 0; 


/** current location in y (center) */ 
private int yPos = 0; 


/** heading angle */ 

//THIS IS A MODIFICATION 

//private double heading = 0;// default is 
facing north 

private double heading = 45;// default is facing 


northeast 


/** pen to use for this turtle */ 
private Pen pen = new Pen(); 


/** color to draw the body in */ 
private Color bodyColor = null; 


/** color to draw the shell in */ 
private Color shellColor = null; 


/** color of information string */ 
private Color infoColor = Color.black; 


/** flag to say if this turtle is visible */ 
private boolean visible = true; 


/** flag to say if should show turtle info */ 
private boolean showInfo = false; 


/** the name of this turtle */ 
private String name = "No name"; 


IIIIISIS1SIS/S/S////// ~ Constructors 
VILSTSA AS ATA SST SIT 


are 
* Constructor that takes the x and y position 
for the 
* turtle 
* @param x the x pos 
* @param y the y pos 
ave 


public SimpleTurtle(int x, int y) 
i 
xPOS 
yPos 


xX; 
yr 


bodyColor = colorArray[numTurtles % 

colorArray.length]; 
setPenColor(bodyColor ); 
numTurtles++; 


} 


La 
* Constructor that takes the x and y position 
and the 
* model displayer 
* @param x the x pos 
* @param y the y pos 
* @param display the model display 
SF 
public SimpleTurtle(int x, int y, ModelDisplay 
display) 
i 


this(x,y); 7/7 invoke constructor that takes x 
and y 

modelDisplay = display; 

display.addModel(this); 


fe 
* Constructor that takes a model display and 
adds 
* a turtle in the middle of it 
* @param display the model display 
aye 
public SimpleTurtle(ModelDisplay display ) 
{ 
// invoke constructor that takes x and y 
this((int) (display.getWidth() / 2), 
(int) (display.getHeight() / 2)); 
modelDisplay = display; 
display.addModel(this); 
System.out.printiln("Dick Baldwin"); 


y 


here: 
* Constructor that takes the x and y position 
and the 
* picture to draw on 
* @param x the x pos 
* @param y the y pos 
* @param picture the picture to draw on 
ay A 
public SimpleTurtle(int x, int y, Picture 
picture) 


this(x,y); 7/7 invoke constructor that takes x 
and y 

this.picture 

this.visible 
the turtle 


} 


Voss 
* Constructor that takes the 
* picture to draw on and will appear in the 
middle 
* @param picture the picture to draw on 
aay 


picture; 
false; // default is not to see 


public SimpleTurtle(Picture picture) 
i 
// invoke constructor that takes x and y 
this((int) (picture.getWidth() / 2), 
(int) (picture.getHeight() / 2)); 
this.picture = picture; 
this.visible = false; // default is not to see 
the turtle 


} 
IIIIISISSISIS//S///// ~ methods 


TITTISISSISISSSSSSISSS SSS 


T= 
* Get the distance from the passed x and y 
location 
* @param x the x location 
* @param y the y location 
to 
public double getDistance(int x, int y) 
{ 
int xDiff = x - xPos; 
int yDiff = y - yPos; 
return (Math.sqrt((xDiff * xDiff) + (yDiff * 
yDiff))); 
t 


f iiiaess 
* Method to turn to face another simple turtle 
a7, 

public void turnToFace(SimpleTurtle turtle) 


turnToFace(turtle.xPos,turtle.yPos); 


} 


Whee 

* Method to turn towards the given x and y 
* @param x the x to turn towards 

* @param y the y to turn towards 
aye 


public void turnToFace(int x, int y) 
{ 

double dx = x - this.xPos; 

double dy = y - this.yPos; 

double arcTan = 0.0; 

double angle = 0.0; 


// avoid a divide by 0 


} 


rp (ake == 0) 
{ 


// if below the current turtle 
if (dy > 0) 
heading = 180; 


// 1f above the current turtle 
else if (dy < 0) 
heading = 0; 
} 
// dx isn't 0 so can divide by it 
else 
{ 
arcTan = Math.toDegrees(Math.atan(dy / dx)); 
if (dx < 0) 
heading = arcTan - 90; 
else 
heading = arcTan + 90; 


i 


// notify the display that we need to repaint 
updateDisplay(); 


poten 


* Method to get the picture for this simple 


turtle 


* @return the picture for this turtle (may be 


null) 


we 


public Picture getPicture() { return 
this.picture; } 


oes’ 


* Method to set the picture for this simple 


turtle 


* @param pict the picture to use 


*/ 
public void setPicture(Picture pict) { 
this.picture = pict; } 


Yi: 
* Method to get the model display for this 
Simple turtle 
* @return the model display if there is one 
else null 
“yA 
public ModelDisplay getModelDisplay() { return 
this.modelDisplay; } 


7 ees 
* Method to set the model display for this 
Simple turtle 
* @param theModelDisplay the model display to 
use 
yf, 
public void setModelDisplay(ModelDisplay 
theModelDisplay ) 
{ this.modelDisplay = theModelDisplay; } 


V ias 
* Method to get value of show info 
* @return true if should show info, else false 
as 
public boolean getShowInfo() { return 
this.showInfo; } 


Ves 
* Method to show the turtle information string 
* @param value the value to set showInfo to 
we 
public void setShowInfo(boolean value) { 
this.showInfo = value; } 


LEX 
* Method to get the shell color 
* @return the shell color 
ae 
public Color getShellColor() 
1 
Color color = null; 
if (this.shellColor == null && this.bodyColor 
!= null) 
color = bodyColor.darker(); 
else color = this.shellColor; 
return color; 


J 


Tia 
* Method to set the shell color 
* @param color the color to use 
oo: 


public void setShellColor(Color color) { 
this.shellColor = color; } 


fe 
* Method to get the body color 
* @return the body color 
we 
public Color getBodyColor() { return 
this.bodyColor; } 


Ves 
* Method to set the body color which 
* will also set the pen color 
* @param color the color to use 
ive 
public void setBodyColor(Color color) 


this.bodyColor = color; 
setPenColor(this.bodyColor ); 


y 


phi 
* Method to set the color of the turtle. 
* This will set the body color 
* @param color the color to use 
wy 
public void setColor(Color color) { 
this.setBodyColor(color); } 


ies 
* Method to get the information color 
* @return the color of the information string 
yA 
public Color getInfoColor() { return 
this.infoColor; } 


Uses 
* Method to set the information color 
* @param color the new color to use 
werd 
public void setInfoColor(Color color) { 
this.infoColor = color; } 


porn 
* Method to return the width of this object 
* @return the width in pixels 
af 

public int getWidth() { return this.width; } 


hess 
* Method to return the height of this object 
* @return the height in pixels 
We 

public int getHeight() { return this.height; } 


yes 


* Method to set the width of this object 
* @param theWidth in width in pixels 
ae, 
public void setWidth(int theWidth) { this.width 
= thewidth; } 


yee 
* Method to set the height of this object 
* @param theHeight the height in pixels 
ay 4 
public void setHeight(int theHeight) { 
this.height = theHeight; } 


Sa 
* Method to get the current x position 
* @return the x position (in pixels) 
uy A 
public int getXPos() { return this.xPos; } 


ft 
* Method to get the current y position 
* @return the y position (in pixels) 
ue 
public int getYPos() { return this.yPos; } 


eFax: 
* Method to get the pen 
* @return the pen 
aye 
public Pen getPen() { return this.pen; } 


Tae: 
* Method to set the pen 
* @param thePen the new pen to use 
aoe 
public void setPen(Pen thePen) { this.pen = 
thePen; } 


Puee 
* Method to check if the pen is down 
* @return true if down else false 
aa A 
public boolean isPenDown() { return 
this.pen.isPenDown(); } 


Fe 
* Method to set the pen down boolean variable 
* @param value the value to set it to 
KYA 
public void setPenDown(boolean value) { 
this.pen.setPenDown(value); } 


yrs 
* Method to lift the pen up 
Pf. 
public void penUp() { 
this.pen.setPenDown( false) ; } 


fe 
* Method to set the pen down 
+7. 
public void penDown() { 
this.pen.setPenDown(true) ; } 


ae 
* Method to get the pen color 
* @return the pen color 
aye 
public Color getPenColor() { return 
this.pen.getColor(); } 


ce’ 
* Method to set the pen color 
* @param color the color for the pen ink 


7, 
public void setPenColor(Color color) { 
this.pen.setColor(color); } 


La 
* Method to set the pen width 
* @param width the width to use in pixels 
ar 
public void setPenWidth(int width) { 
this.pen.setWidth(width); } 


7 rs 
* Method to get the pen width 
* @return the width of the pen in pixels 
aye 
public int getPenwidth() { return 
this.pen.getWidth(); } 


yon 
* Method to clear the path (history of 
* where the turtle has been) 


t/. 
public void clearPath() 
i 

this.pen.clearPath(); 
); 
fees: 


* Method to get the current heading 
* @return the heading in degrees 
ae 
public double getHeading() { return 
this.heading; } 


aul 
* Method to set the heading 
* @param heading the new heading to use 


aa 
public void setHeading(double heading) 
i 


this.heading = heading; 


} 


yee 
* Method to get the name of the turtle 
* @return the name of this turtle 
7. 
public String getName() { return this.name; } 


Wiis 
* Method to set the name of the turtle 
* @param theName the new name to use 
RA 

public void setName(String theName) 

{ 


this.name = theName; 


} 


fe 
* Method to get the value of the visible flag 
* @return true if visible else false 
we 
public boolean isVisible() { return 
this.visible; } 


Ves 
* Method to hide the turtle (stop showing it) 
* This doesn't affect the pen status 
as 

public void hide() { this.setVisible(false); } 


aus 
* Method to show the turtle (doesn't affect 
* the pen status 


e/ 
public void show() { this.setVisible(true); } 


re 
* Method to set the visible flag 
* @param value the value to set it to 
wy 

public void setVisible(boolean value) 


i 
// if the turtle wasn't visible and now is 
if (visible == false && value == true) 
// update the display 
this.updateDisplay(); 
i 


// set the visibile flag to the passed value 
this.visible = value; 


} 


ke 
2 Method to update the display of this turtle 
ie also check that the turtle is in the bounds 
TIE synchronized void updateDisplay( ) 
: // check that x and y are at least 0 
if (xPos < 0) 


XPOS = Q; 
if (yPos < 0) 
yPos = 0; 


// if picture 
if (picture != null) 


if (xPos >= picture.getWidth() ) 


xPos = picture.getwWidth() - 1; 
if (yPos >= picture.getHeight()) 
yPos = picture.getHeight() - 1; 
Graphics g = picture.getGraphics(); 
paintComponent(g); 


} 
else if (modelDisplay != null) 
iu 
if (xPos >= modelDisplay.getWidth() ) 
xPos = modelDisplay.getwWidth() - 1; 
if (yPos >= modelDisplay.getHeight()) 
yPos = modelDisplay.getHeight() - 1; 
modelDisplay .modelChanged(); 
is 
} 


Ties 
* Method to move the turtle foward 100 pixels 
+ 

public void forward() { forward(100); } 


fe 
* Method to move the turtle forward the given 
number of pixels 
* @param pixels the number of pixels to walk 
forward in the heading direction 
ae 
public void forward(int pixels) 


int oldxX 
int oldyY 


xPos; 
yPos; 


// change the current position 

xPos = oldX + (int) (pixels * 
Math.sin(Math.toRadians(heading) )); 

yPos = oldY + (int) (pixels * - 
Math.cos(Math.toRadians(heading) )); 


// add a move from the old position to the new 
position to the pen 
pen.addMove(oldX, oldY, xPos, yPos); 


// update the display to show the new line 
updateDisplay(); 


} 


Wars 
* Method to go backward by 100 pixels 
7. 

public void backward) 


backward(100); 
i; 


fm 
* Method to go backward a given number of 
pixels 
* @param pixels the number of pixels to walk 
backward 
ay, 
public void backward(int pixels) 


forward(-pixels); 


} 


es: 
* Method to move to turtle to the given x and y 
location 
* @param x the x value to move to 
* @param y the y value to move to 
Ws 


public void moveTo(int x, int y) 


{ 


this.pen.addMove(xPos, yPos,x,y); 


this.xPos = x; 

this.yPos = y; 

this.updateDisplay(); 
} 


ae 
* Method to turn left 
ep 

public void turnLeft() 


this.turn(-90); 
i; 


Se 
* Method to turn right 
7. 

public void turnRight() 


this.turn(90); 
4) 


fe 
* Method to turn the turtle the passed 


degrees 


* use negative to turn left and pos to turn 


right 


* @param degrees the amount to turn in 


ye 


public void turn(int degrees) 


degrees 


this.heading = (heading + degrees) % 360; 


this.updateDisplay(); 
} 


Toray 


* Method to draw a passed picture at the 


current turtle 


* location and rotation in a picture or model 


display 
* @param dropPicture the picture to drop 
a, 
public synchronized void drop(Picture 
dropPicture) 


i 
Graphics2D g2 = null; 


// only do this if drawing on a picture 
if (picture != null) 
g2 = (Graphics2D) picture.getGraphics(); 
else if (modelDisplay != null) 
g2 = (Graphics2D) 
modelDisplay.getGraphics(); 


// if g2 isn't null 
if (g2 != null) 
{ 


// save the current tranform 
AffineTransform oldTransform = 
g2.getTransform(); 


// rotate to turtle heading and translate to 
xPos and yPos 


g2.rotate(Math.toRadians(heading), xPos, yPos); 
// draw the passed picture 


g2.drawImage(dropPicture.getImage(), xPos, yPos, null 


T 


// reset the tranformation matrix 
g2.setTransform(oldTransform) ; 


// draw the pen 


pen.paintComponent(g2); 


} 


ie 
* Method to paint the turtle 
* @param g the graphics context to paint on 
aye 
public synchronized void paintComponent(Graphics 
g) 


iu 
// cast to 2d object 


Graphics2D g2 = (Graphics2D) g; 


// if the turtle is visible 
if (visible) 
{ 
// save the current tranform 
AffineTransform oldTransform = 
g2.getTransform(); 


// rotate the turtle and translate to xPos 
and yPos 


g2.rotate(Math.toRadians(heading),xPos, yPos); 


// determine the half width and height of 
the shell 

int halfwidth = (int) (width/2); // of shell 

int halfHeight = (int) (height/2); // of 
shell 

int quarterWidth = (int) (width/4); // of 
shell 

int thirdHeight = (int) (height/3); // of 
shell 

int thirdwidth = (int) (width/3); // of 
shell 


// draw the body parts (head) 
g2.setColor(bodyColor); 
g2.fillOval(xPos - quarterWwidth, 

yPos - halfHeight - (int) 

(height/3), 

halfwidth, thirdHeight); 
g2.fillOval(xPos - (2 * thirdWidth), 

yPos - thirdHeight, 

thirdwidth, thirdHeight ); 
g2.fillOval(xPos - (int) (1.6 * thirdWidth), 

yPos + thirdHeight, 

thirdwidth, thirdHeight ) ; 
g2.fill0val(xPos + (int) (1.3 * thirdWidth), 

yPos - thirdHeight, 

thirdwidth, thirdHeight ) ; 
g2.fillOval(xPos + (int) (0.9 * thirdWidth), 

yPos + thirdHeight, 

thirdwidth, thirdHeight ) ; 


// draw the shell 
g2.setColor(getShellColor()); 
g2.fillOval(xPos - halfWidth, 
yPos - halfHeight, width, 
height ); 


// draw the info string if the flag is true 
if (showInfo) 
drawiInfoString(g2); 


// reset the tranformation matrix 
g2.setTransform(oldTransform) ; 


J 


// draw the pen 
pen. paintComponent(g); 


y 


Yee 
* Method to draw the information string 
* @param g the graphics context 
tf 
public synchronized void drawinfoString(Graphics 
g) 


g.setColor(infoColor); 
g.drawString(this.toString(),xPos + (int) 
(width/2),yPos); 
i; 


Tae 
* Method to return a string with informaiton 
* about this turtle 
* @return a string with information about this 


object 
Ty, 
public String toString() 
{ 
return this.name + " turtle at " + this.xPos + 
W ? W + 


this.yPos + " heading " + this.heading + 


} 
} /7 end of class 


-end- 
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Preface 


This module is one in a collection of modules designed for teaching GAME2302 
Mathematical Applications for Game Development at Austin Community College in 
Austin, TX. 


What you have learned 
In the previous module, you learned: 


¢ How to compare column matrices for equality 

¢ How to compare two points for equality 

¢ How to compare two vectors for equality 

e How to add one column matrix to another 

e How to subtract one column matrix from another 

¢ How to get a displacement vector from one point to another. 


What you will learn 


In this module, you will learn how to display column matrices in a graphical format. 
This may help you to get a better grasp of the nature of column matrices and the 
results of adding, subtracting, and comparing them. 


Viewing tip 


I recommend that you open another copy of this module in a separate browser 
window and use the following links to easily find and view the Images and Listings 
while you are reading about them. 


Images 


e Image 1. Sample graphical program output. 
e Image 2. Text output from the program. 

e Image 3. Graphical output for equal vectors. 
e Image 4. Text output for equal vectors. 

e Image 5. Graphic output from Exercise 01. 


Listings 


¢ Listing 1. Beginning of the method named displayColumnMatrices. 
Listing 2. Use the slider values to create the two matrices. 

Listing 3.. Add and subtract the matrices. 

e Listing 4. Display text information about the matrices. 

e Listing 5. Create mathematical points. 

e Listing 6. Create mathematical displacement vectors. 

e Listing 7. Produce a graphical representation of the displacement vectors. 
e Listing 8. Source code for the program named ColMatrixVis01. 


Preview 


Abstract mathematical concepts are often easier to grasp if you can visualize them in 
graphical format. For example, the nature of the following equation often becomes 
more apparent once you learn that it is the equation of a straight line. 


y=m*x+b 


Similarly, the nature of the following equation often becomes more apparent once you 
learn that it is the equation of a parabola and you learn the general shape of a 
parabola. 


y=x\2+k 
where x/2 indicates x raised to the second power. 


As mentioned earlier, in this module, you will learn how to display column matrices 
in a graphical format. This may help you to get a better grasp of the nature of column 
matrices and the results of adding, subtracting, and comparing them. 


I will present and explain an interactive program that behaves as follows: 


Two column matrices are created using values obtained from the sliders shown at the 
bottom of Image 1. One matrix is named redMatrix and the other matrix is named 
greenMatrix . 

Image 1: Sample graphical program output. 


— 


Red matrix values jut peeeny peennyi 
-100 -50 O 50 100-100 -50 0 50 100 


Green matrix values 


-100 -50 O 50 100-100 50 0O 50 100 


Two additional column matrices are created by adding and subtracting the original 
matrices. The matrix created by adding the red and green matrices is named 
blueMatrix . The matrix created by subtracting the green matrix from the red matrix 
is named orangeMatrix . 


Mathematical points are created to represent the values in the four matrices in a 2D 
reference frame. Then, mathematical displacement vectors are created for each of the 
points relative to the origin. 


Graphical objects are created for each of the four displacement vectors and those 
objects are drawn along with Cartesian coordinate axes in the 2D reference frame. 


The vectors are shown in the top portion of Image 1. The red and green vectors 
represent the red and green matrices. The blue and orange vectors represent the sum 
and the difference of the red and green matrices. 


Text output is displayed to show the matrix values as well as whether the two original 
matrices are equal. The text values corresponding to the vectors in Image 1 are shown 
in Image 2. 

Image 2: Text output from the program. 


redMatrix = 53.0,53.0 

greenMatrix = 79.0, -66.0 

redMatrix equals greenMatrix: false 

blueMatrix = redMatrix + greenMatrix = 132.0, -13.0 
orangeMatrix = redMatrix - greenMatrix = -26.0,119.0 


If you carefully adjust the sliders so that the two values contained in the redMatrix 
are the same as the two values contained in the greenMatrix , the red and green 
vectors will overlay as shown in Image 3 and the third line of output text will show 
true as shown in Image 4. In this case, only the green vector and part of the blue 
(sum) vector are visible. The red vector is covered by the green vector, and the orange 
(difference) vector has a zero length. 

Image 3: Graphical output for equal vectors. 


—————$4 


Red matrix values prreegen rit ‘| peeeupereeqeerepeas 
-100 -50 O 50 100-100 -50 0 50 100 


Green matrix values 


-100 -50 O 50 100-100 -50 0 50 100 


Image 4: Text output for equal vectors. 


redMatrix = 100.0,100.0 

greenMatrix = 100.0,100.0 

redMatrix equals greenMatrix: true 

blueMatrix = redMatrix + greenMatrix = 200.0, 200.0 
OrangeMatrix = redMatrix - greenMatrix = 0.0,0.0 


There are many other interesting combinations that I could show. However, I will 
leave it as an exercise for the student to copy, compile, and run the program and use 
the sliders to experiment with different matrix values. 


I will also provide an exercise for you to complete on your own at the end of the 
module. The exercise will concentrate on the material that you have learned in this 
module and previous modules. 


Discussion and sample code 


Because of its interactive nature, much of the code in this program is at a complexity 
level that is beyond the scope of this course. However, most of the interesting work is 
done in the method named displayColumnMatrices and I will concentrate on 
explaining that method. 


You can view a complete listing of the program named ColMatrixVis01 in Listing 8 
near the end of the module. 


Note that the program requires access to the game library named GM2D03 . The 
source code for that library was provided in the earlier module titled GAME2302- 
0115: Working with Column Matrices, Points, and Vectors and you can copy it from 
there. 


The method named displayColumnMatrices 
The purpose of this method is to: 


1. Create two column matrices named redMatrix and greenMatrix using values 
obtained from sliders. 

2. Create two more column matrices named blueMatrix and orangeMatrix by 
adding and subtracting the red and green matrices. 

3. Display text information about the matrices including whether or not the red and 
green matrices are equal. 

4. Create mathematical points in a 2D coordinate frame that represent the values in 
the matrices. 

5. Create mathematical displacement vectors that represent the displacements of 
each of the points relative to the origin. 

6. Create and draw graphics objects that represent each of the mathematical 
displacement vectors along with Cartesian coordinate axes for the 2D reference 
frame. 


Beginning of the method named displayColumnMatrices 
I will explain the method named displayColumnMatrices in fragments. You can 


view the entire method in Listing 8 . The first fragment is shown in Listing 1. 
Listing 1: Beginning of the method named displayColumnMatrices. 


void displayColumnMatrices(Graphics2D g2D){ 


//Get two values for each matrix from the sliders. 
redO = redSliderO.getValue(); 

redi = redSlideri.getValue(); 
greenSliderO.getValue(); 
greenSlider1.getValue(); 


Get two values for each matrix from the sliders 


The little things with the pointed bottoms on the sliders in Image 1 are often called 
the thumbs of the sliders. Each thumb points down to a numeric scale that ranges 
from -100 on the left to +100 on the right. 


Each time you move a thumb on a slider, the method named 
displayColumnMatrices , including the code in Listing 1, is executed. The code in 
Listing 1 gets the value corresponding to the position of each thumb and saves those 
four values in the variables named redO , red1 , green0O , and green1 . 


The two sliders in the top row represent red. The two sliders in the bottom row 
represent green. 


The values of the two sliders on the left correspond to red0 and greenO . The two on 
the right correspond to red1 and green1 . 


Use the slider values to create the two matrices 


Listing 2 uses the slider values to create the two matrices named redMatrix and 
greenMatrix . 


(More properly, the code uses the values to create two ColMatrix objects and to store 
references to those objects in the variables named redMatrix and greenMatrix .) 
Listing 2: Use the slider values to create the two matrices. 


//Use the slider values to create the two matrices 
// named redMatrix and greenMatrix. 
GM2D03.ColMatrix redMatrix = 
new 
GM2D03.ColMatrix(red0, red1); 


GM2D03.ColMatrix greenMatrix = 
new 
GM2D03.ColMatrix(green0O, greeni); 


There is nothing new in Listing 2 that you haven't seen before so further explanation 
should not be necessary. 


Add and subtract the matrices 


Listing 3 creates two additional matrices by adding and subtracting the red and green 
matrices. References to the new matrices are stored in the variables named 
blueMatrix and orangeMatrix . 

Listing 3: Add and subtract the matrices. 


//Create two additional matrices by adding and 
// subtracting the red and green matrices. 
GM2D03.ColMatrix blueMatrix = 


redMatrix.add(greenMatrix); 
GM2D03.ColMatrix orangeMatrix = 


redMatrix.subtract(greenMatrix); 

Once again, there is nothing new in Listing 3, so further explanation should not be 
necessary. 

Display text information about the matrices 

Listing 4 displays text information about the four matrices, including whether or not 


the red and green matrices are equal. 
Listing 4: Display text information about the matrices. 


//Display text information about the matrices. 
System.out.printin();//blank line 


System.out.printin("redMatrix = " + redMatrix); 
System.out.printin("greenMatrix = " + greenMatrix); 
System.out.printin("redMatrix equals greenMatrix: " + 


redMatrix.equals(greenMatrix)); 


System. out. print1n( 
"pblueMatrix = redMatrix + greenMatrix = " + 


blueMatrix); 
System. out.printin( 
"orangeMatrix = redMatrix - greenMatrix = " + 


orangeMatrix); 


The code in Listing 4 produced the text in Image 2 and Image 4. 


Displaying information about the matrices 


There are many ways to display information about matrices, including the simple text 
displays shown in Image 2 and Image 4. The problem with text displays is that you 
have to study the numbers in detail to get a feel for an individual matrix and a feel for 
the relationships among two or more matrices. 


A graphical display can often convey that sort of information at first glance. Then you 
are faced with a decision as to how you should construct the graphical display. 


For the case of a column matrix with two elements, a good approach is to let the two 

matrix values represent the x and y coordinate values of a mathematical point in a 2D 
reference frame and then to display information about the point. That is the approach 
taken by this program. 


Create mathematical points 


Listing 5 creates mathematical points in a 2D coordinate frame that represent the 
values in the matrices. Listing 5 also creates a point that represents the origin. 
Listing 5: Create mathematical points. 


//Create mathematical points in a 2D coordinate 
// frame that represent the values in the matrices. 
// Also create a point that represents the origin. 
GM2D03.Point origin = 

new GM2D03.Point (new 

GM2D03.ColMatrix(0,0)); 
GM2D03.Point redPoint = 
new 


GM2D03.Point(redMatrix); 
GM2D03.Point greenPoint = 


GM2D03.Point(greenMatrix); 
GM2D03.Point bluePoint = new 
GM2D03.Point(blueMatrix); 
GM2D03.Point orangePoint = 
new 
GM2D03.Point(orangeMatrix); 


Displaying the points 


Once you have the points, you then need to decide what might be the best format in 
which to display them. One obvious approach would simply be to draw small 
symbols in the 2D coordinate frame that represent the locations of the points. 


However, in most real-world situations, we tend to evaluate the value of something 
relative to a value of zero. 


(There are, however, exceptions to this rule. For example, when considering the 
temperature in Celsius, we tend to evaluate the temperature relative to zero degrees 
Celsius, which is the freezing point of water. On a Fahrenheit scale, however, we tend 
to evaluate temperature relative to 32-degrees F, which is the freezing point of water. ) 


Displacement vectors 


A good way to get a feel for the location of a mathematical point in a 2D reference 
frame is to compare the location of that point with the location of a different point 
through the use of a displacement vector. That is the approach taken by this program 
with the anchor point being the point at the origin against which all other points are 
compared. 


Listing 6 creates mathematical displacement vectors that represent the displacements 
of each of the four points created earlier relative to the origin. 
Listing 6: Create mathematical displacement vectors. 


//Create mathematical displacement vectors that 

// represent the displacements of each of the points 
// relative to the origin. 

GM2D03.Vector redVec = 


origin. getDisplacementVector(redPoint); 
GM2D03.Vector greenVec = 


origin.getDisplacementVector(greenPoint ); 
GM2D03.Vector blueVec = 


origin.getDisplacementVector(bluePoint); 
GM2D03.Vector orangeVec = 


origin.getDisplacementVector(orangePoint ); 


Produce a graphical representation of the displacement vectors 


Listing 7 produces and displays a graphical representation of each of the four 
displacement vectors as shown in Image 1. 
Listing 7: Produce a graphical representation of the displacement vectors. 


//The remaining code is used to create and draw 
// graphical objects. 

//Erase the off-screen image 
g2D.setColor(Color.WHITE); 

g2D.Till(rect) ; 


//Set the line thickness so that the vectors will be 
// drawn with a heavy line. 
g2D.setStroke(new BasicStroke(3)); 


//Draw the four vectors with their tails at the 
// OFigin: 

g2D.setColor(Color.BLUE); 

blueVec.draw(g2D, origin); 


g2D.setColor(Color.ORANGE) ; 
orangeVec.draw(g2D, origin); 


g2D.setColor(Color.RED) ; 
redVec.draw(g2D, origin); 


g2D.setColor(Color.GREEN) ; 
greenVec.draw(g2D, origin); 


//Draw the axes with thinner lines. 
g2D.setStroke(new BasicStroke(1)); 
g2D.setColor(Color.BLACK) ; 
drawAxes(g2D); 


}//end displayColumnMatrices 


There is very little new code in Listing 7, and the new code that is there should be 
easy to understand. 


Analysis of results 


The head of the red vector in Image 1 represents the two values in the column matrix 
known as redMatrix . The length and direction of that vector shows how it relates to 
a column vector having two elements, each with a value of zero. 


Similarly, the head of the green vector in Image 1 represents the two values in the 
column matrix known as greenMatrix . 


The head of the blue vector represents the two values in the column matrix known as 
blueMatrix , which was created by adding the red and green matrices. In case you 
haven't noticed, a line drawn from the head of the red vector to the head of the blue 
vector would have the same length and direction as the green vector. This will come 
up again in a future module when we discuss the vector addition parallelogram. 


The head of the orange vector represents the two values in the column matrix know as 
orangeMatrix , which was created by subtracting the green matrix from the red 
matrix. Again, a line drawn from the head of the red vector to the head of the orange 
vector would have the same length and opposite direction as the green vector. 


Homework assignment 


The homework assignment for this module was to study the Kjell tutorial through 
Chapter 3 - Vector Addition . That is also the homework assignment for the next 
module. 


In addition to studying the Kjell material, you should read at least the next two 
modules in this collection and bring your questions about that material to the next 
classroom session. 


Finally, you should have begun studying the physics material at the beginning of the 
semester and you should continue studying one physics module per week thereafter. 

You should also feel free to bring your questions about that material to the classroom 
for discussion. 


Run the program 


I encourage you to copy the code from Listing 8 . Compile the code and execute it in 
conjunction with the game-math library named GM2D03 . The source code for that 
library was provided in the earlier module titled GAME2302-0115: Working with 
Column Matrices, Points, and Vectors and you can copy it from there.. Experiment 
with the code, making changes, and observing the results of your changes. Make 
certain that you can explain why your changes behave as they do. 


Summary 


In this module, you learned how to create column matrices using values obtained 
from sliders. You learned how to create additional column matrices by adding and 
subtracting the original matrices. 


You learned how to display text information about the matrices including whether or 
not they are equal. 


You learned how to display the matrices in a graphical format where each matrix is 
represented by a displacement vector in a 2D reference frame. 


What's next? 
In the next module, you will learn: 


¢ How to add two or more vectors. 

e About the head-to-tail rule in vector addition. 

e About the vector addition parallelogram. 

e About the relationship between the length of the sum of vectors and the sum of 
the lengths of vectors. 

¢ How to add a vector to a point. 

¢ How to get the length of a vector. 

¢ How to represent an object in different coordinate frames. 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


e Module name: GAME2302-0120: Visualizing Column Matrices 
e File: Game0120.htm 

e Published: 10/15/12 

e Revised: 12/31/12 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to download a 
PDF file for this module at no charge, and also makes it possible for you to purchase 
a pre-printed version of the PDF file, you should be aware that some of the HTML 
elements in this module may not translate well into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 

In the past, unknown individuals have copied my modules from cnx.org, converted 
them to Kindle books, and placed them for sale on Amazon.com showing me as the 
author. I neither receive compensation for those sales nor do I know who does 
receive compensation. If you purchase such a book, please be aware that it is a copy 
of a module that is freely available on cnx.org and that it was made and published 
without my prior knowledge. 

Affiliation :: | am a professor of Computer Information Technology at Austin 
Community College in Austin, TX. 


Complete program listing 


A complete listing of the program named ColMatrixVis01 is provided in Listing 8 . 
The game library named GM2D03 , which is required for compiling and executing 
this program, was provided in the earlier module titled GAME2302-0115: Working 
with Column Matrices, Points, and Vectors . You can copy it from there. 

Listing 8: Source code for the program named ColMatrixVis01. 


/*ColMatrixVis01.java 
Copyright 2012, R.G.Baldwin 


The purpose of this program is to help the student 
visualize column matrices. Two column matrices are created 
using values obtained from sliders. 


Two additional column matrices are created by adding and 
subtracting the original matrices. 


Mathematical points are created to represent the values 
in the matrices ina 2D reference frame. 


Displacement vectors are created for each of the points 
relative to the origin. 


The vectors are drawn along with Cartesian coordinate axes 
in the 2D reference frame. 


Text output is displayed to show the matrix values as well 
as whether the two original matrices are equal. 


Tested using JDK 1.7 under WinXP and Windows 7 
PRAT Te De RB Be NR GS OT, TN ae TS ee, RENTS Oe SR EON NE VR ae Be ee Ce eRe ae Of 
import java.awt.*; 

import javax.swing. JFrame; 

import javax.swing. JPanel; 

import javax.swing.JSlider; 

import javax.swing.JLabel; 

import javax.swing.event.ChangeListener ; 
import javax.swing.event.ChangeEvent; 

import java.lang.Math; 

import java.util.*; 


class ColMatrixVis01{ 
public static void main(String[] args){ 
GUI guiObj = new GUI(); 
}//end main 
}//end controlling class ColMatrixVis01 


class GUI extends JFrame{ 
//Specify the horizontal and vertical size of a JFrame 
// object. 


int hSize = 450; 
int vSize = 600; 


Image osi;//off-screen image 


int osiWidth; 


//off-screen image width 


int osiHeight;//off-screen image height 
MyCanvas myCanvas;//a subclass of Canvas 


//Panel to contain the sliders and associated labels. 
private JPanel mainPanel = new JPanel(); 


//Sliders used to produce values for column matrices. 
private JSlider redSliderO = new JSlider(); 
private JSlider redSlider1 = new JSlider(); 


private JSlider greenSlider®o 
private JSlider greenSlider1 


new JSlider(); 
new JSlider(); 


//Storage area for values extracted from sliders. 
private int redO = 100; 

private int redi = 100; 

private int greenO = 100; 


private int green1 


-100; 


//Object used to erase the off-screen image. 
private Rectangle rect; 


GUI(){//constructor 
//Configure the sliders. 


redSlidero. 
redSlidero. 
redSlidero. 
redSlidero. 
redSlidero. 
redSlidero. 
redSlidero. 


redSlideri. 
redSlideri. 
redSlideri. 
redSlideri. 
redSlideri. 
redSlideri. 
redSlideri. 


setMaximum(100) ; 
setMinimum(-100); 
setMajorTickSpacing(50); 
setMinorTickSpacing(10); 
setPaintTicks(true); 
setPaintLabels(true); 
setValue(redO); 


setMaximum(100) ; 
setMinimum(-100) ; 
setMajorTickSpacing(50); 
setMinorTickSpacing(10); 
setPaintTicks(true); 
setPaintLabels(true); 
setValue(redt1); 


greenSliderO.setMaximum(100); 
greenSliderO.setMinimum(-100) ; 
greenSliderO.setMajorTickSpacing(50); 
greenSliderO.setMinorTickSpacing(10); 
greenSliderO.setPaintTicks(true); 
greenSliderO.setPaintLabels(true); 
greenSliderO.setValue(green®O) ; 


greenSlider1.setMaximum(100); 
greenSlider1.setMinimum(-100) ; 
greenSlider1.setMajorTickSpacing(50)j; 
greenSlider1.setMinorTickSpacing(10) ; 
greenSlider1.setPaintTicks(true); 
greenSlider1.setPaintLabels(true); 
greenSlider1.setValue(greent1) ; 


//Set the layout manager for the panel that contains 
// the sliders and the associated labels. 
mainPanel.setLayout(new GridLayout(2,3))j; 


//Add the sliders and associated labels to the panel. 
mainPanel.add(new JLabel(" Red matrix values")); 
mainPanel.add(redSlider0O); 

mainPanel.add(redSlider1); 


mainPanel.add(new JLabel(" Green matrix values")); 
mainPanel.add(greenSlider®) ; 
mainPanel.add(greenSlider1) ; 


//Set JFrame size, title, and close operation. 
setSize(hSize, vSize) ; 

setTitle("Copyright 2012, R.G.Baldwin"); 
setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); 


//Create a new drawing canvas and add it to the 
// center of the JFrame. 
myCanvas = new MyCanvas(); 
this.getContentPane().add(myCanvas) ; 
this.getContentPane().add( 

mainPanel, BorderLayout.SOUTH) ; 


//This object must be visible before you can get an 
// off-screen image. It must also be visible before 
// you can compute the size of the canvas. 
setVisible(true); 

osiWidth = myCanvas.getWidth(); 

osiHeight = myCanvas.getHeight(); 


//Configure the object that will be used to erase 
// the off-screen image. 
rect = new Rectangle( 
-osiWidth/2, -osiHeight/2, osiwWidth, osiHeight ); 


//Create an off-screen image and get a graphics 

// context on it. 

Osi = createImage(osiWidth, osiHeight); 

final Graphics2D g2D = 
(Graphics2D)(osi.getGraphics()); 


//Translate the origin to the center of the 
// off-screen image. 
g2D.translate(osiWidth/2.0,osiHeight/2.0); 


//Erase the off-screen image. 
g2D.setColor(Color.WHITE); 
g2D.fill(rect);//erase the osi 


//Display the initial values of the column matrices 
displayColumnMatrices(g2D); 


//Register a listener on each of the sliders. 
redSliderO.addChangeListener ( 
new ChangeListener(){ 
public void stateChanged(ChangeEvent e){ 
//Re-display the column matrices each time the 
// thumb is moved on the slider. 
displayColumnMatrices(g2D); 
}//end stateChanged 
}//end new ChangeListener 
);//end addChangeListener 


redSlider1.addChangeListener ( 
new ChangeListener(){ 


public void stateChanged(ChangeEvent e){ 
displayColumnMatrices(g2D); 
}//end stateChanged 


}//end new ChangeListener 


);7//end addChangeListener 


greenSliderO.addChangeListener ( 


new ChangeListener(){ 


public void stateChanged(ChangeEvent e){ 
displayColumnMatrices(g2D); 
}//end stateChanged 


}//end new ChangeListener 


);7//end addChangeListener 


greenSlider1.addChangeListener ( 


new ChangeListener(){ 


public void stateChanged(ChangeEvent e){ 
displayColumnMatrices(g2D); 
}//end stateChanged 


}//end new ChangeListener 


);7/end addChangeListener 
}//end constructor 


yee 


//The purpose of this method is to 


1 aes 


Create two column matrices named redMatrix and 
greenMatrix using values obtained from sliders. 


. Create two more column matrices named blueMatrix 


and orangeMatrix by adding and subtracting the red 
and green matrices. 

Display text information about the matrices 
including whether the red and green matrices are 
equal. 


. Create mathematical points in a 2D coordinate 


frame that represents the values in the matrices. 


. Create mathematical displacement vectors that 


represent the displacements of each of the points 
relative to the origin. 


. Create and draw graphics objects that represent 


each of the mathematical displacement vectors 
along with Cartesian coordinate axes for the 
2D reference frame. 


void displayColumnMatrices(Graphics2D g2D){ 


//Get two values for each matrix from the sliders. 
redO = redSliderO.getValue(); 
redi = redSlideri.getValue(); 
greenO = greenSliderO.getValue(); 
greeni = greenSlider1.getValue(); 
//Use the slider values to create the two matrices 
// named redMatrix and greenMatrix. 
GM2D03.ColMatrix redMatrix = 
new GM2D03.ColMatrix(red0, red1); 

GM2D03.ColMatrix greenMatrix = 

new GM2D03.ColMatrix(greend, greent) ; 


//Create two additional matrices by adding and 
// subtracting the red and green matrices. 
GM2D03.ColMatrix blueMatrix = 
redMatrix.add(greenMatrix); 
GM2D03.ColMatrix orangeMatrix = 
redMatrix.subtract(greenMatrix); 


//Display text information about the matrices. 
System.out.printin();//blank line 


System.out.printin("redMatrix = " + redMatrix); 
System.out.printin("greenMatrix = " + greenMatrix); 
System.out.printin("redMatrix equals greenMatrix: " + 


redMatrix.equals(greenMatrix) ); 

System. out.printin( 
"blueMatrix = redMatrix + greenMatrix = " + 
blueMatrix); 

System. out.printin( 
"orangeMatrix = redMatrix - greenMatrix = " + 
OrangeMatrix); 


//Create mathematical points in a 2D coordinate 
// frame that represent the values in the matrices. 
// Also create a point that represents the origin. 
GM2D03.Point origin = 
new GM2D03.Point(new GM2D03.ColMatrix(0,0)); 
GM2D03.Point redPoint = 
new GM2D03.Point(redMatrix); 


GM2D03.Point greenPoint = 
new GM2D03.Point(greenMatrix); 
GM2D03.Point bluePoint = new GM2D03.Point(blueMatrix); 
GM2D03.Point orangePoint = 
new GM2D03.Point(orangeMatrix); 


//Create mathematical displacement vectors that 
// represent the displacements of each of the points 
// relative to the origin. 
GM2D03.Vector redVec = 
Origin.getDisplacementVector(redPoint ); 
GM2D03.Vector greenVec = 
Origin.getDisplacementVector(greenPoint ); 
GM2D03.Vector blueVec = 
origin.getDisplacementVector(bluePoint ); 
GM2D03.Vector orangeVec = 
origin.getDisplacementVector (orangePoint ); 


//The remaining code is used to create and draw 
// graphical objects. 

//Erase the off-screen image 
g2D.setColor(Color.WHITE); 

g2D.fill(rect); 


//Set the line thickness so that the vectors will be 
// drawn with a heavy line. 
g2D.setStroke(new BasicStroke(3) ); 


//Draw the four vectors with their tails at the 
// origin. 

g2D.setColor(Color.BLUE); 

blueVec.draw(g2D, origin); 


g2D.setColor (Color .ORANGE) ; 
orangeVec.draw(g2D, origin); 


g2D.setColor(Color.RED) ; 
redVec.draw(g2D, origin); 


g2D.setColor(Color.GREEN) ; 
greenVec.draw(g2D, origin); 


//Draw the axes with thinner lines. 
g2D.setStroke(new BasicStroke(1)); 
g2D.setColor(Color.BLACK) ; 
drawAxes(g2D); 


}//end displayColumnMatrices 
A ie Nah takatatatatahatatatatatatatatatatatatetatatatetatstetatatatetatatalatatatatatatatatetatetatetate 


//The purpose of this method is to draw a pair of 
// Cartesian coordinate axes onto the 

// off-screen image. 

void drawAxes(Graphics2D g2D){ 


//Define four points at the edges of the coordinate 
// frame and the ends of the axes. 
GM2D03.Point pointO = new GM2D03.Point( 
new GM2D03.ColMatrix(-osiWidth/2, 0) 
GM2D03.Point pointi = new GM2D03.Point( 
new GM2D03.ColMatrix(osiWidth/2,0) 
GM2D03.Point point2 = new GM2D03.Point( 
new GM2D03.ColMatrix(0, -osiHeight/2) 
GM2D03.Point point3 = new GM2D03.Point( 
new GM2D03.ColMatrix(0, osiHeight/2) 


//Now define the two lines based on the end points... 
GM2D03.Line xAxis = new GM2D03.Line(point0O, point1); 
GM2D03.Line yAxis = new GM2D03.Line(point2, point3); 


//Now draw a visual manifestation of each line 
// on g2D. 

XAXis.draw(g2D); 

yAxis.draw(g2D); 


//Repaint the display area 
myCanvas.repaint(); 


}//end drawAxes 
//This iS an inner class of the GUI class. 


class MyCanvas extends Canvas{ 
//Override the paint() method. This method will be 


); 
); 
); 
); 


// called when the JFrame and the Canvas appear on the 

// screen or when the repaint method is called on the 

// Canvas object. 

public void paint(Graphics g){ 
g.drawImage(osi,0,0, this); 

}//end overridden paint() 


}//end inner class MyCanvas 


}//end class GUI 


Exercises 


Exercise 1 


Using Java and the game-math library named GM2D03 , or using a different 
programming environment of your choice, write a program that uses random values to 
generate two column matrix objects. 


Generate two more column matrix objects as the sum and difference of the two 
original column matrix objects. 


Display the two original column matrix objects in red and green and display the sum 
and difference matrix objects in blue and orange as shown in Image 5. 
Image 5: Graphic output from Exercise 01. 


_ Ex01, Baldwin 


-end- 


HTML5Test01: HTML 5 canvas test 
The purpose of this module is to test the serving of an HTML 5 document 
with an animation on the canvas. 


Purpose 


The purpose of this module is to present an HTML 5 document with an 
animation on the canvas. 


Click here to view the document. 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


e Module name: HTML5Test01: HTML 5 canvas test 
e File: HTML5Test01.htm 
e Published: 02/22/13 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to 
download a PDF file for this module at no charge, and also makes it 
possible for you to purchase a pre-printed version of the PDF file, you 
should be aware that some of the HTML elements in this module may not 
translate well into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 
In the past, unknown individuals have copied my modules from cnx.org, 
converted them to Kindle books, and placed them for sale on Amazon.com 
showing me as the author. I neither receive compensation for those sales 


nor do I know who does receive compensation. If you purchase such a 
book, please be aware that it is a copy of a module that is freely available 
on cnx.org and that it was made and published without my prior 
knowledge. 

Affiliation : I am a professor of Computer Information Technology at 
Austin Community College in Austin, TX. 


-end- 


PdfTest01 

The purpose of this module is to test for the use of "local pdf" files in the 
new openstax format. NOTE: THE PDF FILES USED IN THIS TEST 
ARE IN ROUGH DRAFT FORM AND SHOULD NOT BE 
INTERPRETED TO BE FOR ANY PURPOSE OTHER THAN TO 
CONFIRM THAT THEY CAN BE OPENED IN A FIREFOX BROWSER. 


Table of contents 


e Preface 
e Tutorial links 


Preface 


The purpose of this module is to test for the use of "local pdf" files in the 
new openstax format. 


NOTE: THE PDF FILES USED IN THIS TEST ARE IN ROUGH DRAFT 
FORM AND SHOULD NOT BE INTERPRETED TO BE FOR ANY 
PURPOSE OTHER THAN TO CONFIRM THAT THEY CAN BE 
OPENED IN A FIREFOX BROWSER. 


Tutorial Links 


e 00-NetBeansPrimer-v8.pdf 
e 01-FirstServlet.pdf 
e hello.zip 


-end- 


Test page for Figure, Listing, Note, and Table objects 
Test page for Figure, Listing, Note, and Table objects 


This is a test document to compare the display of cnxml Figure, Listing, 
Note, and Table objects. 
ZZ 

Figure 


This is a cnxml Figure object. 


ZZ 


ZZ 
Figure 


This is another cnxml Figure object. 


ZZ 


Example: 
ZL 


This 1s a cnxml Listing object. 


Example: 


ZZ 


This is another cnxml Listing object. 


Note: 


This 1s a cnxml Note object. 


Note: 


This is another cnxml Note object. 


Image 7a . Zz 


This is a cnxml Table object. 


Image 8a . zz 


This is another cnxml Table object. 


Image 1 . Table object with an image. 


-end- 


TableFigAndListingNumbers 
TableFig AndListingNumbers 


Table of Contents 


e Preface 
e Questions 
Oo D2 


e Answers 
e Miscellaneous 


Preface 
The purpose of this module is to illustrate that: 


e It is not a good idea to require that identifiers for cnxml Figure objects 
and cnxml Listing objects be restricted solely to sequential numbers. 
(Note that this module uses identifiers like Figure 1a and Figure 1b to 
cause the identifiers to fit into the context of the discussion.) 

e It is not a good idea to require that identifiers for cnxml Figure objects 
and cnxml Listing objects be determined by the physical locations of 
the objects on a web page. (Note that Listing_1b is closer to the end of 
the webpage than Listing 2 to cause the identifiers to fit into the 
context of navigating back and forth between two major sections of the 
web page.) 


Questions 


Question 1. 


True or False? Given the input image file named Q01.jpg shown in Figure 
la, the code in Listing 1a produces the output image shown in Figure 1b . 


Figure 1a . Input image. 


Listing 1a. Program QO1a. 


public class QO1a{ 
public static void main(String[] args){ 
Picture pic = new QO1aRunner().run(); 
}//end main method 
}//end class QO1a 


Class QO1aRunner { 


public Picture run(){ 
Picture pix = new Picture("Q01.jpg"); 


pix = mirrorUpperBand( 


Listing la. Program QOl1a. 


pix,1+pix.getWidth()/4,pix.getwWidth()/4); 
pix = mirrorUpperBand( 


pix,pix.getwWidth()/2,pix.getwidth()/2); 
pix.explore(); 
return pix; 


}//end run 


private Picture mirrorUpperBand( 
Picture pix,int 
center, int width) { 
Pixel leftPixel = null; 
Pixel rightPixel = null; 


for(int row = O;row < 
pix.getHeight()/2; row++) { 
for(int cnt=0;cnt < width;cnt++){ 

int leftCol = center-cnt; 

int rightCol = center+cnt; 

leftPixel = pix.getPixel(leftCol, row); 

rightPixel = 
pix.getPixel(rightCol, row); 


rightPixel.setColor(leftPixel.getColor()); 
}//end inner loop 
}//end outer loop 


return pix; 
}//end mirrorUpperBand 


Listing 1a. Program QO1a. 


}//end class QO1aRunner 


Figure 1b . Output image. 


Go to Answer 1 


Question 2 


True or False? Given the input image files named Q02a.jpg and Q02b.jpg 
shown in Figure 2a and Figure 2b respectively, the code in Listing 2 
produces the output image shown in Figure 2c . 


Figure 2a . Input image file Q02a.jpg. 


Figure 2b . Input image file Q02b.jpg. 


Figure 2b . Input image file Q02b.jpg. 


Listing 2 . Program Q02. 


import java.awt.Graphics2D; 
import java.awt.geom.Rectangle2D; 
import java.awt.Graphics; 

import java.awt.Polygon; 

import java.awt.Color; 


public class Q02{ 
//DO NOT MODIFY THE CODE IN THIS CLASS 
DEFINITION. 


Listing 2 . Program Q02. 


public static void main(String[]| args){ 
new QO2Runner().run(); 
}//end main method 
}//end class Q02 


Class QO2Runner{ 


public void run(){ 
Picture penguin = new Picture("Q02a.jpg"); 
Picture hare = new Picture("Q02b.jpg"); 
penguin = crop(penguin, 6,58, 330,252); 
hare = crop(hare, 6,58, 330,252); 


hare = clipToPolygon(hare,Color.RED); 
penguin = 
clipToPolygon( penguin, Color.GREEN) ; 


merge(hare, penguin); 


hare.show(); 
System.out.println(hare); 
}//end run 


//Assumes both pictures have the same 
dimensions. 

// Does a linear merge on two pictures based 
on the 

// distance of each pixel from the left side 
of the 

// picture. 

private void merge(Picture left,Picture 
right ){ 

int width = left.getWidth(); 


Listing 2 . Program Q02. 


int height 


double scaleL 
double scaleR 


int redL = 0; 
int greenL = 
int blueL = 

int redR = 0; 
int greenR = 
int blueR = 0 


Pixel pixelL 
Pixel pixelR 


for(int row = 
for(int col 


0) ' 


left.getHeight(); 


0; 
0; 


0; 
0; 
null; 
null; 


row < height; row++) { 


0; 
= 0;col < width;col++){ 


scaleR 
scaleL 
pixelL 
pixelR 
redL = 
greenL 
blueL 


redR = 
greenR 
blueR 
redL = 
redR*scaleR); 
greenL 
greenR*scaleR) 
blueL 
blueR*scaleR) ; 


(double)col/width; 

1.0 - scaleR; 
left.getPixel(col, row); 
right.getPixel(col, row); 


pixelL.getColor().getRed(); 
= pixelL.getColor().getGreen(); 
pixelL.getColor().getBlue(); 


pixelR.getColor().getRed(); 
pixelR.getColor().getGreen(); 
pixelR.getColor().getBlue(); 


(int)(redL*scaleL + 


(int)(greenL*scaleL + 


T 


(int)(blueL*scaleL + 


Listing 2 . Program Q02. 


pixelL.setColor (new 
Color(redL, greenL, blueL)); 
}//end inner loop 
}//end outer Loop 
}//end merge 


//Crops a Picture object to the given width 
and height 
// with the upper-left corner located at 
startCol and 
// startRow. 
private Picture crop(Picture pic,int 
startCol, 
int 
startRow, 
int width, 
int height) { 
Picture output = new Picture(width, height); 


int colout 
int rowOut 
int col = 0; 
int row = 0; 
Pixel pixel = null; 
Color color = null; 
for(col = startCol;col < 
startCol+width;col++) { 
for(row = startRow;row < 
startRowtheight ; row++) { 
color = 
pic.getPixel(col, row).getColor(); 
pixel = output.getPixel(colOut, rowOut ); 
pixel.setColor(color); 


0; 
0; 


Listing 2 . Program Q02. 


rowOut++; 
}//end inner loop 
rowOut = 0; 
col0Out++; 
}//end outer loop 
return output; 
}//end crop 
[[-------- 2-7 rr rn rr rr rr rr rr rr er rere eee 


private Picture clipToPolygon(Picture 
pix,Color color){ 
Picture result = new 
Picture(pix.getwWidth(), 


pix.getHeight()); 
result.setAl1LPixelsToAColor(color); 


//Get the graphics2D object 
Graphics2D g2 = (Graphics2D) 
(result.getGraphics()); 


int xPoints[ ] {0, 
pix.getwidth()/2, 
pix.getWidth(), 
pix.getwidth()/2 


+3 


int yPoints[] = {pix.getHeight()/2, 
0, 
pix.getHeight()/2, 
pix.getHeight() 
ti 


//Create a Polygon for clipping 


Listing 2 . Program QO02. 


Polygon polygon = new 
Polygon(xPoints, yPoints, 4); 


//Use the Polygon for clipping 
g2.setClip(polygon); 


//Draw the image 
g2.drawImage(pix.getImage(),0,0,pix.getwidth(), 
pix.getHeight(), 

null); 


return result; 
}//end clipToPolygon 


}//end class QO2Runner 


Figure 2c . Output image. 


Figure 2c . Output image. 


Go to Answer 2 
What is the meaning of the following two images? 


These images were inserted here simply to insert some space between the 
questions and the answers to keep them from being visible on the screen at 
the same time. 


None Cox) 


Display your namethiete. 


This image was also inserted for the purpose of inserting space between the 
questions and the answers. 


Prob05a.jpg 
Put your name here 


La} 
ab 
i 


4> 


pony 


Answers 


Answer 2 


True. 


Back to Question 2 


Answer 1 


False. The code in Listing 1a produces the output image shown in Figure 1c 
. Note the difference in the bottom half of the image. The output image 
shown in Figure 1b is actually produced by the code shown in Listing 1b. 


Figure 1c . Output image. 


| x[4jo | y| 4] 0 | 


R: 2 G: 0 B: 1 Color at location: i 


Listing 1b . Program QO01b. 


public class QO1b{ 
public static void main(String[] args){ 
Picture pic = new QO1bRunner().run(); 
}//end main method 
}//end class QO1b 


Class QO1ibRunner { 


public Picture run(){ 
Picture pix = new Picture("Q01.jpg"); 
pix = mirrorUpperBand( 


pix,1+pix.getWidth()/4,pix.getWidth()/4); 
pix = mirrorUpperBand( 


pix, pix.getWidth()/2,pix.getwidth()/2); 


pix = mirrorHoriz(pix); 
pix.explore(); 
return pix; 


}//end run 


private Picture mirrorUpperBand( 
Picture pix,int 
center, int width) { 
Pixel leftPixel = null; 
Pixel rightPixel = null; 


for(int row = O;row < 
pix.getHeight()/2; rowt++) { 


Listing 1b . Program QO01b. 


for(int cnt=0;cnt < width;cnt++){ 
int leftCol = center-cnt; 
int rightCol = center+cnt; 
leftPixel = pix.getPixel(leftCol, row); 
rightPixel = 
pix.getPixel(rightCol, row); 


rightPixel.setColor(leftPixel.getColor()); 
}//end inner loop 
}//end outer loop 


return pix; 
}//end mirrorUpperBand 


private Picture mirrorHoriz(Picture pix){ 
Pixel topPixel = null; 
Pixel bottomPixel = null; 
int midpoint = pix.getHeight()/2; 
int height = pix.getHeight(); 
for(int col = O;col < 
pix.getwWidth( );col++) { 
for(int row = O;row < midpoint; rowt++) { 
topPixel = pix.getPixel(col, row); 
bottomPixel = 
pix.getPixel(col, height -1- 
row); 


bottomPixel.setColor(topPixel.getColor()); 
}//end inner loop 
}//end outer loop 


return pix; 
}//end mirrorHoriz 


Listing 1b . Program QO01b. 


}//end class QO1bRunner 


Go back to Question 1 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


e Module name: TableFigAndListingNumbers 
e File: TableFigAndListingNumbers.htm 
e Published: 12/04/14 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to 
download a PDF file for this module at no charge, and also makes it 
possible for you to purchase a pre-printed version of the PDF file, you 
should be aware that some of the HTML elements in this module may not 
translate well into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 
In the past, unknown individuals have copied my modules from cnx.org, 
converted them to Kindle books, and placed them for sale on Amazon.com 
showing me as the author. I neither receive compensation for those sales 
nor do I know who does receive compensation. If you purchase such a 
book, please be aware that it is a copy of a module that is freely available 


on cnx.org and that it was made and published without my prior 


knowledge. 
Affiliation : I am a professor of Computer Information Technology at 


Austin Community College in Austin, TX. 


-end- 


Itse1359-1430-Instance Variables 

In this module, you will learn some of the details regarding instance 
variables. You will also learn that although other OO languages such as 
Java and C++ use terminology that is common with Python terminology, 
such as class, object, class variable, and instance variable, that terminology 
has significantly different meanings in Python. 


Table of Contents 
e Preface 


o What you have learned 
o What you will learn 
o Viewing tip 


=» Figures 
= Listings 


e General background information 
e Discussion and sample code 
o Empty objects 
= Instantiate two objects of the empty class 
= Would be almost worthless in Java or C++ 
= Add an instance variable to one object 
= Try_to display the same instance variable in the other object 


» Visualize the code in Listing 9 
o Object can modify itself at runtime 


= The definition of a class named TestClass 
= Add an instance variable to one object and display it 
= Visualize the code in Listing 10 


o The method named _ init 


=» Acclass with an init method 


= Instantiate and display two objects 
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Preface 


This module is one in a collection of modules on Python designed for 
teaching ITSE 1359 Introduction to Scripting Languages: Python at Austin 
Community College in Austin, TX. 


What you have learned 


An earlier module provided an overview of classes and objects in Python. 
Similarly, an earlier module explained the use of the self word in Python 
class definitions. 


What you will learn 


I promised in an earlier module that I would revisit and explain the 
difference between class variables and instance variables in classes and 
objects. That is the purpose of this and some future modules. 


In this module, you will learn some of the details regarding instance 
variables. You will also learn that although other OO languages such as 
Java and C++ use terminology that is common with Python terminology, 
such as class , object , class variable , and instance variable , those terms 
have significantly different meanings in Python than they do in many other 
OO languages. 


Viewing tip 


I recommend that you open another copy of this module in a separate 
browser window and use the following links to easily find and view the 
Figures and the Listings while you are reading about them. 


(Note to blind and visually impaired students: most of the Figures and all of 
the Listings in this module are presented in plain text format and should be 
accessible using an audio screen reader or a braille display. Note however 
that the required indentation may not be properly represented by an audio 
screen reader.) 


Figures 


e Figure 1. Print the object's references. 

e Figure 2. Output from the code in Listing 2. 
e Figure 3. Output from the code in Listing 3. 
e Figure 4. Output from the code in Listing 8. 
e Figure 5. Output from code in Listing 9. 

e Figure 6. Output from code in Listing 10. 

e Figure 7. Output from code in Listing 11. 


Listings 


e Listing 1. Empty objects. 

e Listing 2. Add an instance variable to one object. 

e Listing 3. Try to display the same instance variable in the other object. 
e Listing 4. Object can modify itself at runtime. 

e Listing 5. Add an instance variable to one object and display it. 
e Listing 6. A class with an__init__ method. 

e Listing 7. Instantiate and display two objects. 

e Listing 8. Display first instance variable from both objects. 

e Listing 9. Complete program listing. 

e Listing 10. Complete program listing. 

e Listing 11. Complete program listing. 


General background information 


In Java, C#, and C++, once you define and compile a class, that class, 
(which is the blueprint for an object) , can only be modified by recompiling 
the class. In other words, once compiled, a class is intended to be stable and 
in general cannot be modified at runtime. 


Also in Java and C++, once you instantiate an object from a class, you 
cannot modify the structure of the object. You can modify the values of the 
data stored in the object but the structure of the object is stable and cannot 
be modified at runtime. 


Along that line, the structure of an object in Java and C++ is explicitly tied 
to the blueprint provided by the class from which it was instantiated. There 
is a fixed relationship between the object and the class from which it was 
instantiated. 


None of that is true in Python. You can modify the structure of a Python 
object at runtime after it is instantiated. By that I mean that you can add 
new instance variables to an object such that the structure of the object is 
different from the blueprint provided by the class from which it was 
instantiated. Further, you can modify the blueprint provided by the class at 
runtime after the class has been used to instantiate one or more objects. 


I'm not suggesting that this is either good or bad. I'm simply stating that it is 
true. If you are coming at Python from a Java or C++ background, you must 
significantly modify the way that you think about classes and objects to 
make the transition. If you plan to progress from Python to either Java or 
C++, your will need to significantly modify the way that you think about 
classes and objects when you make that transition. 


Discussion and sample code 


I will discuss three different short programs in this module. A complete 
listing of the first program is provided in Listing 9 . The output from that 
program is shown in Figure 5. 


I will break each program down and discuss it in fragments. The first 
fragment is shown in Listing 1. 


Empty objects 


Listing 1 shows the definition of a class named TestClass that contains no 
variables and no methods. In other words, the class is empty. 


Listing 1 . Empty objects. 


Class TestClass(object): 
pass 


print("Instantiate and display two objects of 
TestClass") 

ref01 = TestClass() 

print(ref01) 

ref02 = TestClass() 

print(ref02) 


Instantiate two objects of the empty class 


Listing 1 also shows the instantiation of two objects from the empty class 
named TestClass . Those object's references are stored in the variables 
named ref01 and ref02 . 


The variables are also printed in Listing 1 producing the output shown in 
Figure 1 . 


Figure 1 . Print the object's references. 


Instantiate and display two objects of 
TestClass 

<__main__.TestClass object at 0x00274910> 
<__main__.TestClass object at Ox005A25F0> 


I told you in an earlier module that the variables named ref01 and ref02 
contain information that somehow identifies the chunks of memory 
occupied by the objects. This is indicated by the two hexadecimal values at 
the right end of the last two lines of text in Figure 1. This is apparently one 
thing that can't be changed about an object after it is instantiated. Even after 
modifying the contents of an object, the hexadecimal identifier seems to 
remain constant. 


Would be almost worthless in Java or C++ 


Although it would be technically possible to define an empty class and 
instantiate objects from that class in Java and C++, such objects probably 
wouldn't be very useful in their own right. 


In Python, you can define an empty class and instantiate objects from that 
class. You can add instance variables to the object at runtime after it is 
instantiated, which might be useful in some situations. As you will see in a 


future module, you can even add class variables to a class after it has been 
used to instantiate objects. That might also be useful in some situations. 


Add an instance variable to one object 


The code in Listing 2 uses the variable named ref01 to add a new variable 
with a value of 1234 to the object referred to by ref01 . 


Listing 2 . Add an instance variable to one object. 


print("Add an instance variable to one object 
and display it") 

ref01.iVar = 1234 

print(ref01.iVar) 


Listing 2 also uses the reference variable named ref01 to print the value of 
the new variable belonging to the object referred to by ref01 . Figure 2 
shows the output produced by the code in Listing 2 . 


Figure 2 . Output from the code in Listing 2. 


Figure 2 . Output from the code in Listing 2. 


Add an instance variable to one object and 
display it 
1234 


Try to display the same instance variable in the other object 


The code in Listing 3 uses the variable named ref02 in an attempt to display 
the same instance variable on the object referred to by ref02 . 


Listing 3 . Try to display the same instance variable in the other 
object. 


print("Try to display the same instance 
variable in the other object") 
print(ref02.iVar) 


However, the code that added a new instance variable to one object in 
Listing 2 did not add the same instance variable to both objects that were 
originally instantiated from the same class. Therefore, at this point, the two 
objects have different structures. The code in Listing 3 produced the error 
message shown in Figure 3 . 


Figure 3 . Output from the code in Listing 3. 


Try to display the same instance variable in 
the other object 
Traceback (most recent call last): 
File "1359-1430-13.py", line 18, in <module> 
print(ref02.iVar) 
AttributeError: 'TestClass' object has no 
attribute '1iVar' 


Visualize the code in Listing 9 


I recommend that you create a visualization for the code in Listing 9 and 
step through the program one instruction at a time. As you do that, pay 
attention to the movements of the red and green arrows on the left, the 
diagram on the right, and the printed material at the bottom. That should 
help you to better understand the behavior of empty objects in Python. 


Object can modify itself at runtime 


The next program that I will discuss is a minor modification to the previous 
program but ends up with the same result. A complete listing of the 
program is provided in Listing 10 and the output from the program is shown 
in Figure 6. I will only discuss those things that are different between this 
program and the previous program. 


The definition of a class named TestClass 


The first difference is shown in Listing 4, which shows the definition of a 
class named TestClass . Instead of being empty as in the previous program, 
this class provides a method named addInstanceVar by which an object 
can add and initialize a new instance variable named iVar to itself at 
runtime. 


Listing 4 . Object can modify itself at runtime. 


Class TestClass(object): 
def addInstanceVar(self,data): 
self.iVar = data 


I am presenting and explaining this program for a couple of different 
reasons: 


e It will be useful in explaining the method named __init__ in the next 
program in this module. 

e It will be useful in explaining issues surrounding class variables in a 
future module. 


Add an instance variable to one object and display it 


The other difference between the two programs is shown in Listing 5. 
Instead of accessing the object directly to add the new instance variable, as 
was done in Listing 2, the code in Listing 5 calls the method named 
addInstanceVar on the object to cause the new instance variable to be 
added. 


Listing 5 . Add an instance variable to one object and display it. 


print("Add an instance variable to one object 
and display it") 

ref01.addInstanceVar (1234) 

print(ref01.1iVar ) 


As mentioned earlier, the end result is the same as you will see if you 
examine the output from the program shown in Listing 11 . 


Visualize the code in Listing 10 


Once again, I recommend that you create a visualization for the code in 
Listing 10 and step through the program one instruction at a time. As you 
do that, pay attention to the movements of the red and green arrows on the 
left, the diagram on the right, and the printed material at the bottom. That 
should help you to better understand how a Python object can modify itself 
at runtime. 


The method named __init__ 


You learned in the previous program that a method belonging to an object 
can add an instance variable to an object at runtime. 


You also learned in an earlier module that if your class contains a method 
named __init___, that method will be executed automatically in conjunction 
with the instantiation of the object. As I understand it, that is probably the 
last thing that happens before the new object's reference is returned to be 
saved for later use. 


A complete listing of a program that I will use to discuss the __init__ 
method is shown in Listing 11. The output produced by that program is 
shown in Figure 7. As usual, I will explain the program in fragments. 


A class with an __init__ method 


Listing 6 shows the definition of a class named TestClass that contains a 
method named __init__ in addition to a method named addInstanceVar as 
in the previous program. 


Listing 6 . A class with an __init__ method. 


Class TestClass(object): 
def _ init__(self,data): 
self.iVar01 = data 


def addInstanceVar(self,data): 
self.iVar02 = data 


When either of the methods shown in Listing 6 are executed, a new instance 
variable will be added to the object and initialized with an incoming data 
value. Since the method named __init__ is always executed automatically 
in conjunction with the instantiation of an object, the initial state of the 
object will include an instance variable named iVar01 . 


Instantiate and display two objects 


The code in Listing 7 instantiates and prints two new objects of the class 
named TestClass . You can view the output produced by the code in Listing 
Zin Figure 7. There probably won't be any surprises there. 


Listing 7 . Instantiate and display two objects. 


print("Instantiate and display two objects of 
TestClass") 

ref01 = TestClass("ABCD" ) 

print(ref01) 


ref02 = TestClass("DEFG") 
print(ref02) 


The incoming parameter to the __init__ method 


You may have been wondering about the source of the incoming parameter 
named data for the __init__ method in Listing 6. Note that each call to 
TestClass in Listing 7 passes a different parameter. These are the 
parameters that are automatically passed to the __init__ method when it is 
executed. Therefore, when one object is instantiated, the __init__ method 
will receive "ABCD" as an incoming parameter. When the other object is 
instantiated, it will receive "DEFG" as an incoming parameter. 


Display first instance variable from both objects 


Because the __init__ method is included in the class definition and because 
it is automatically executed when a new object is instantiated, each object 
contains an instance variable named iVar01 when the instantiation of the 
object is complete. 


The code in Listing 8 displays the value of the instance variable named 
iVar01 in each object. 


Listing 8 . Display first instance variable from both objects. 


print("Display first instance variable from 
both objects") 

print(ref01.iVar01) 

print(ref02.iVar01) 


Figure 4 shows the output from the code in Listing 8 . Note that the last two 
lines of text in Figure 4 match the values passed as parameters when the 
objects were instantiated in Listing 7 . 


Figure 4 . Output from the code in Listing 8. 


Figure 4 . Output from the code in Listing 8. 


Display first instance variable from both 
objects 

ABCD 

DEFG 


The remainder of the program 


The remaining code shown in Listing 11 is essentially the same as the 
corresponding code shown in Listing 10 that was discussed earlier. 
Therefore, no explanation of the remaining code should be needed. 


Hopefully you have a better understanding of Python instance variables 
now than when you began studying this module. 


Visualize the code in Listing 11 


As usual, I recommend that you create a visualization for the code in 
Listing 11 and step through the program one instruction at a time. As you 
do that, pay attention to the movements of the red and green arrows on the 
left, the diagram on the right, and the printed material at the bottom. That 
should help you to better understand the __init__ method and the 
initialization of objects in Python. 


Run the program 


I also encourage you to copy the code from Listing 9 , Listing 10, and 
Listing 11. Execute the code and confirm that you get the same results as 
those shown. Experiment with the code, making changes, and observing the 


results of your changes. Make certain that you can explain why your 
changes behave as they do. 


Complete program listings 


Complete listings of the programs discussed in this module along with the 
output produced by those programs are provided below. 


Listing 9 . Complete program listing. 


Listing 9 . Complete program listing. 


# This program illustrates an empty object 


Class TestClass(object): 
pass 


print("Instantiate and display two objects of 
TestClass") 

ref01 = TestClass() 

print (ref01) 

ref02 = TestClass() 

print(ref02) 


print("Add an instance variable to one object 
and display it") 

ref01.iVar = 1234 

print(ref01.iVar) 


print("Try to display the same instance 


variable in the other object") 
print(ref02.iVar) 


Figure 5 . Output from code in Listing 9. 


Figure 5 . Output from code in Listing 9. 


Instantiate and display two objects of 
TestClass 

<__main__.TestClass object at 0x00274910> 
<__main__.TestClass object at Ox005A25F0> 
Add an instance variable to one object and 
display it 

1234 

Try to display the same instance variable in 
the other object 

Traceback (most recent call last): 

File "1359-1430-13.py", line 18, in <module> 
print(ref02.iVar) 

AttributeError: 'TestClass' object has no 
attribute '1Var' 


Listing 10 . Complete program listing. 


Listing 10 . Complete program listing. 


# Illustrates ability for object to modify 
itself at runtime 


Class TestClass(object): 
def addInstanceVar(self,data): 
self.iVar = data 


print("Instantiate and display two objects of 
TestClass") 

ref01 = TestClass() 

print(ref01) 

ref02 = TestClass() 

print(ref02) 


print("Add an instance variable to one object 
and display it") 

ref01.addInstanceVar (1234) 

print(ref01.iVar) 


print("Try to display the same instance 


variable in the other object") 
print(ref02.iVar) 


Figure 6 . Output from code in Listing 10. 


Figure 6 . Output from code in Listing 10. 


Instantiate and display two objects of 
TestClass 

<__main__.TestClass object at 0x00224910> 
<__main__.TestClass object at 0x00512850> 
Add an instance variable to one object and 
display it 

1234 

Try to display the same instance variable in 
the other object 

Traceback (most recent call last): 

File "1359-1430-15.py", line 20, in <module> 
print(ref02.1iVar) 

AttributeError: 'TestClass' object has no 
attribute '1Var' 


Listing 11 . Complete program listing. 


Listing 11 . Complete program listing. 


# This program illustrates instance variables 
and the __init__ method 


Class TestClass(object): 
def _ init__(self,data): 
self.iVar01 = data 


def addInstanceVar(self,data): 
self.iVar02 = data 


print("Instantiate and display two objects of 
TestClass") 

ref01 = TestClass("ABCD" ) 

print(ref01) 

ref02 = TestClass("DEFG" ) 

print(ref02) 


print("Display first instance variable from 
both objects") 

print(ref01.iVar01) 

print(ref02.iVar01) 


print("Add an instance variable to one object 
and display it") 

ref01.addInstanceVar (1234) 
print(ref01.iVar02) 


print("Try to display the same instance 
variable in the other object") 
print(ref02.iVar02) 


Figure 7 . Output from code in Listing 11. 


Instantiate and display two objects of 
TestClass 
<__main__.TestClass object at 0x00492E50> 
<__main__.TestClass object at 0x00492E70> 
Display first instance variable from both 
objects 
ABCD 
DEFG 
Add an instance variable to one object and 
display it 
1234 
Try to display the same instance variable in 
the other object 
Traceback (most recent call last): 

File "1359-1430-17.py", line 26, in <module> 

print(ref02.iVar02) 

AttributeError: 'TestClass' object has no 
attribute '1iVar02' 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


e Module name: Itse1359-1430-Instance Variables 
e File: Itse1359-1430.htm 

e Published: 10/27/14 

e Revised: 03/04/15 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to 
download a PDF file for this module at no charge, and also makes it 
possible for you to purchase a pre-printed version of the PDF file, you 
should be aware that some of the HTML elements in this module may not 
translate well into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 
In the past, unknown individuals have copied my modules from cnx.org, 
converted them to Kindle books, and placed them for sale on Amazon.com 
showing me as the author. I neither receive compensation for those sales 
nor do I know who does receive compensation. If you purchase such a 
book, please be aware that it is a copy of a module that is freely available 
on cnx.org and that it was made and published without my prior 
knowledge. 

Affiliation : I am a professor of Computer Information Technology at 
Austin Community College in Austin, TX. 


-end- 
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Preface 


The purpose of this junk module is to experiment with the pdf display of 
images. 


Images and listings 


Images 


e Image 1. Result of merging two images. 

e Image 2. Input image #1. 

Image 3. Input image #2. 

Image 4 . Putting the library on the classpath. 
Image_5. Batch file for text version of Hello World. 
Image 6. Hello World in graphics. 


e Image 7. Batch file for graphic version of Hello World. . 


Listings 


e Listing 1. A text version of Hello World. 
e Listing 2. A graphic version of Hello World. 


Preview 


Among other things, the Guzdial-Ericson multimedia class library makes it 
practical to write object-oriented programs for the manipulation of images 
in an interesting and educational way. For example, the image in Image 1 
was produced by manipulating and merging the images shown in Image 2 
and Image 3. 


Image 1 Result of merging two images. 


The image shown above simply inserts an img tag in a paragraph. The 
caption is created as a paragraph immediately ahead of the paragraph 
containing the image. A standard hyperlink is used as the anchor for the 
image. 


ZZ 


The image shown below inserts the image in a table and uses the table 
heading for the caption. As of 01/24/16, this approach produces three 
extraneous copies of the image in the cnx pdf download file. 


One of the input images is shown in Image 2. 


Image 2 . Input image #1. 


The other input image is shown in Image 3. 


Image 3 . Input image #2. 


Discussion 
When you examine tzz 
Put the library on the classpath 


You will need to put the path to the bookClasses folder on your classpath in 
order to incorporate classes from the library into your programs. 


Image 4. Putting the library on the classpath. 


Image 4. Putting the library on the classpath. 


del *.class 
javac -cp .;M:\bookClasses *.java 
java -cp .;M:\bookClasses Prob01 


For example, Image 4 shows three commands that you can execute at a 
Windows command prompt to 


Two versions of Hello World 


It is often useful to have the code for a simple program to test your system. 
This section presents two versions of the classical Hello World program. 
The first version is a simple text version that doesn't use Ericson's library. 
This version can be used to confirm that the Java Development Kit (JDK) is 
properly installed on your computer. 


The second version is a graphic version that does require Ericson's library. 
This version can be used to confirm proper installation and use of the 
library. 


A text version of Hello World 


The simple program shown in Listing 1 causes the words Text Hello World 
to be displayed on the standard output device when the program is compiled 
and executed. 


Listing 1. A text version of Hello World. 


Class TextHelloworld{ 
public static void main(String[] args){ 
System.out.println( "Text Hello World"); 
}//end main 
}//end class 


The program shown in Listing 2 causes the image shown in Image 6 to be 
displayed when the program is compiled and executed. 


Image 6 . Hello World in graphics. 


Graphic Hello World 


As mentioned above, zz 


scellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


¢ Module name: PdfImageTest01 
e File: PdflmageTest01.htm 
e Published: 01/24/16 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to 
download a PDF file for this module at no charge, and also makes it 
possible for you to purchase a pre-printed version of the PDF file, you 
should be aware that some of the HTML elements in this module may not 
translate well into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 
In the past, unknown individuals have misappropriated copies of my 
modules from cnx.org, converted them to Kindle books, and placed them 
for sale on Amazon.com showing me as the author. I receive no 
compensation for those sales and don't know who does receive 
compensation. If you purchase such a book, please be aware that it is a 
bootleg copy of a module that is freely available on cnx.org. 

Affiliation : I am a professor of Computer Information Technology at 
Austin Community College in Austin, TX. 


-end- 
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Preface 


JUNK JUNK JUNK The purpose of this junk module is to experiment with 
text inside of and outside of tables in the PDF rendering. JUNK JUNK JUNK 


The program described in this module requires the use of the Guzdial-Ericson 
multimedia class library. You will find download, installation, and usage 
instructions for the library at Java OOP: The Guzdial-Ericson Multimedia 
Class Library . 


Viewing tip 


I recommend that you open another copy of this document in a separate 
browser window and use the following links to easily find and view the 
images and listings while you are reading about them. 


Figures 


e Figure 1. Raw butterfly image. 

e Figure 2. Beach scene with student's name added. 

e Figure 3.. Composite image. 

e Figure 4. Required text output. 

e Figure 5. Cropped and flipped version of the butterfly image. 
e Figure 6. Partially complete version of the output picture. 


Listings 


e Listing 1. The driver class named Prob02. 

e Listing 2. Beginning of the ProbO2Runner class. 
e Listing 3. Beginning of the run method. 

e Listing 4. Beginning of the cropAndFlip method. 
e Listing 5. Process using nested loops. 


e Listing 6. Call the copyPictureWithCrop method from the run method.. 


e Listing 7. Beginning of the method named copyPictureWithCrop. 
e Listing 8. Process using nested loops. 

e Listing 9. The remainder of the run method. 

e Listing 10. Complete program listing. 


Preview 


In this module, you will learn how to: 


¢ Work directly with individual pixels and keep track of coordinate values. 
e Copy a portion of one picture into a specific location in another picture. 


e Crop and flip a picture. 


Program specifications 


Write a program named Prob02 that uses the class definition shown in Listing 
land Ericson's media library along with the image files named Prob02a.jpg 
and Prob02b.jpg to produce the three graphic output images shown in Figure 
1, Figure 2, and Figure 3 . 


Figure 1 - Raw butterfly image. 
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R: 179 G: 179 B: 161 Color at location: 


Figure 2 - Beach scene with student's name added. 
|EB Prob02 jpa 
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Figure 3 - Composite image. 


E3 Prob02b jpg 
Zoom 


R: 2 G: 0 B: 1 Color at location: ie 
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May define new classes 

You may define new classes as necessary to cause your program to behave as 
required, but you may not modify the class definition for the class named 
Prob02 given in Listing 1. 

The facing butterfly images 

The two facing images of the butterflies in the final output picture are 
separated by two pixels and those two images as a pair are centered in the 
picture of the beach. 


Required text output 


In addition to the three output images mentioned above, your program must 
display your name and the other three lines of text shown in Figure 4 on the 
command-line screen: 


The following text is displayed in a table. 


Figure 4 . Required text output. 


//Comment to prevent pdf indentation 

Display your name here. 

Picture, filename Prob0O2a.jpg height 118 width 
100 

Picture, filename Prob02b.jpg height 240 width 
320 

Picture, filename None height 101 width 77 


General background information 


This program copies a rectangular portion of a picture of a butterfly into a 
specific location in a picture of a beach. 


The program also crops the butterfly picture to the same size as the portion 
that was copied into the beach picture and flips the cropped version to cause 
the butterfly to face left instead of facing right. 


Then it copies the cropped and flipped image to a location two pixels to the 
right of the original copy of the butterfly in the beach image. 


The two resulting images of the butterfly within the beach image are separated 
by two pixels, face one another, and are centered in the picture of the beach as 
shown in Figure 3. 


Major evaluation areas 


In order to successfully write this program, the student must, as a minimum be 
able to: 


e Work directly with individual pixels and keep track of coordinate values. 
e Copy a portion of one picture into a specific location in another picture. 
e Crop and flip a picture. 


Discussion and sample code 
Will discuss in fragments 


I will discuss this program in fragments. A complete listing of the program is 
provided in Listing 10 near the end of the module. 


The driver class named Prob02 

The driver class containing the main method is shown in Listing 1. 
The following text is displayed without a table. 

Listing 1 . The driver class named Prob02. 


//Comment to prevent pdf indentation 
import java.awt.Color; 


public class Prob02{ 
public static void main(String[] args){ 
Picture[] pictures = new ProbO2Runner().run(); 


System.out.printiln(pictures[0]); 

System.out.printin(pictures[1]); 

System.out.printiln(pictures[2]); 
}//end main method 
}//end class Prob02 


A reference to an array object 


The call to the run method in Listing 1 may be new to you. This call expects 
to receive a reference to an array object of type Picture[] as a return value. 


Save return value in variable named pictures 


The return value from the run method is stored in the local reference variable 
named pictures . 


Extract and print references to Picture objects 


Then the reference variable is used to extract references to the individual 
Picture objects encapsulated in the array. Those references are passed to the 
printIn method causing the last three lines of text shown in Figure 4 to be 
displayed on the command line screen. 


Beginning of the Prob02Runner class 


The class named Prob02Runner begins in Listing 2 , which shows the 
constructor for the class. 


Listing 2 . Beginning of the Prob02Runner class. 


Class ProbO2Runner { 


public ProbO2Runner(){//constructor 
System.out.printiln("Display your name 
here."); 
}//end constructor 


The constructor simply causes the student's name to be displayed on the 
command line screen, producing the first line of output text shown in Figure 4 


Beginning of the run method 


The run method, that was called in Listing 1 begins in Listing 3 . 


Listing 3 . Beginning of the run method. 


public Picture[] run(){ 
Picture picA = new Picture("Prob@2a. jpg"); 
picA.explore(); 


Picture picB = new Picture("Prob02b.jpg"); 

picB.addMessage("Display your name 
here.",10,20); 

picB.explore(); 


Picture picC = cropAndFlip(picA, 4,5,80,105); 


Listing 3 instantiates two Picture objects from image files and displays them 
by calling the explore method on each Picture object. In addition, the 
student's name is added near the upper-left corner of the beach image. This 
code results in the images shown in Figure 1 and Figure 2 . 


Call the cropAndFlip method 


Then Listing 3 calls the cropAndFlip method passing the reference to the 
butterfly image of Figure 1, along with some other information as parameters. 
The return value is stored in a new local reference variable of type Picture 
named picC . 


Put discussion of the run method on hold 


I will put the discussion of the run method on temporary hold at this point 
and explain the method named cropAndFlip , which begins in Listing 4 . 


Beginning of the cropAndFlip method 


The cropAndFlip method crops a picture to the specified coordinate values 
and flips it around a vertical line at its center. 


Listing 4 . Beginning of the cropAndFlip method. 


private Picture cropAndFlip(Picture pic, 
int x1i,int yi, 
int x2,int y2){ 
Picture output = new Picture(x2-x1+1, y2- 
yit+1); 


int width = output.getWidth(); 


Pixel pixel 
Color color 


null; 
null; 


Incoming parameters 


In addition to a reference to the picture to be processed, the method receives 
four incoming integer values as parameters. The parameters named x1 and y1 
specify the coordinates of the upper-left corner of a rectangular area of the 
picture that is to be retained in the output. 


The parameters named x2 and y2 specify the coordinates of the lower-right 
comer of the rectangular area of the picture that is to be retained in the output. 


An empty Picture object 


Listing 4 begins by creating an empty Picture object of the correct size to 
hold the cropped image. A reference to the empty picture is saved in the local 
reference variable named output . 


Then Listing 4 gets and saves the width of the output picture. 


Following this, Listing 4 declares two local working variables named pixel (of 
type Pixel ) and color (of type Color ) . 


Process using nested loops 


Listing 5 uses a pair of nested for loops to cause the output picture to be a 
cropped version of the picture received as an incoming parameter. The 
cropped image is flipped around its center. 


Listing 5 . Process using nested loops. 


for(int col = x1;col < (x2+1);col+t+){ 
for(int row = y1;row < (y2+1);row++) { 
color = 
pic.getPixel(col, row).getColor(); 
pixel = output.getPixel(width-col+x1- 
1,row-y1); 
pixel.setColor(color); 
}//end inner loop 
}//end outer loop 


return output; 
}//end cropAndFlip method 


The code in Listing 5 copies the pixel colors of the selected pixels of the 
incoming image to the pixels of the output image, flipping the image around 
its center line in the process. 


Cropped and flipped version of the butterfly image 


If you display the picture referred to by output in Listing 5 , you will get the 


image shown in Figure 5. 


Figure 5 - Cropped and flipped version of the butterfly image. 
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Compare with the original butterfly picture 


If you compare Figure 5 with Figure 1, you will see that pixels on the outer 
edges of Figure 1 have been discarded and the resulting image has been 
flipped around its centerline. 


End of the cropAndFlip method 

Figure 5 returns a reference to the new image and ends the method named 
cropAndFlip . The returned value is stored in the variable named picC in 
Listing 3 . 


Original image not modified 


Note that the code in the cropAndFlip method does not modify the original 
image of the butterfly. Instead, it extracts pixel data from the original image to 
produce a new image. When control returns to the run method in Listing 3, a 
reference to the new image is stored in the variable named picC . 


Call the copyPictureWithCrop method from the run method 


Control has now returned to the run method, picking up where Listing 3 left 
off. The next statement in the run method is shown in Listing 6. 


Listing 6 . Call the copyPictureWithCrop method from the run 
method. 


copyPicturewithCrop(picA, picB, 82, 70,4,5,77,101); 


Put the run method on hold again 


Once again, I will put the run method on hold while I explain the method 
named copyPictureWithCrop , which begins in Listing 7 . 


Beginning of the method named copyPictureWithCrop 


The first two incoming parameters named source and dest are references to a 
source picture and a destination picture. 


When the method is called in Listing 6, the source picture is the original 


butterfly picture shown in Figure 1 and the destination picture is the beach 
picture shown in Figure 2. 


Listing 7 . Beginning of the method named copyPictureWithCrop. 


Listing 7 . Beginning of the method named copyPictureWithCrop. 


private void copyPictureWithCrop( 
Picture source, 
Picture dest, 
int xOff, 
int yOff, 
int xCoor, 
int yCoor, 
int width, 
int height) { 


//Confirm that source will fit in 
destination 
if(((width+xOff) <= dest.getWidth()) && 
((height+yOff) <= dest.getHeight())){ 


null; 
null; 


Pixel pixel 
Color color 


Copy source to destination 


The method named copyPictureWithCrop copies part of the source picture 
into the destination picture with an offset on both axes after first confirming 
that the part will fit. The method does nothing if the part won't fit. 


The copy process causes selected pixel colors in the destination picture to be 
replaced by pixel colors from the source picture. 


The offset values 


The next two parameters named xOff and yOff in Listing 7 specify the 
location in the destination picture where the upper-left corner of the cropped 
source picture is to be located. 


The statement in Listing 6 passes the values (82,70) for these two values. This 
is the location of the upper left corner of the left-most butterfly image in 
Pigiie 3. 


Note: Not really cropped 

For clarity, I will refer to this as a cropped source picture even though the 
program doesn't actually save a cropped version of the picture as was the 
case with the cropAndFlip method. 

The program simply copies a rectangular portion of the source picture into 
the destination picture. 


Upper-left cropping corner 


The parameters named xCoor and yCoor in Listing 7 specify the upper-left 
comer of the rectangular area of pixels that is to be preserved when the source 
image is cropped. 


Coordinate values of (4,5) are passed for these two values when the method is 
called in Listing 6. 


Same values as Listing 3 


Note that these are the same two values that were passed for this purpose 
when the cropAndFlip method was called in Listing 3 . 


Two ways to specify a rectangle 


There are two commonly used ways to specify a rectangular area in 
programming. One way is to specify the coordinates of the upper-left and 
bottom right corners. This is the approach used in the cropAndFlip method in 
Listing 4. 


The other way is to specify the coordinates of the upper-left corner and then to 
specify the width and the height. This is the approach used in the 
copyPictureWithCrop method in Listing 7. 


The width and height parameters 


The parameters named width and height in Listing 7 specify the width and 
height of the rectangular area of pixels that is to be preserved when the source 
picture is cropped. 


If you compare the width and height parameter values passed in Listing 6 with 
the coordinate values passed in Listing 3 , you will see that the same 
rectangular area of the butterfly image is being preserved after cropping in 
both cases. 


Confirm that the cropped image will fit 


Listing 7 begins by confirming that the cropped rectangular area of the source 
picture will fit within the destination picture when placed at the specified 
location. If the conditional clause of the if statement returns true, then the 
code in the body of the statement will be executed. If not, control bypasses the 
body of the if statement and the source picture will not be copied into the 
destination picture. 


Process using nested for loops 


As was the case in Listing 4, Listing 7 declares two working variables named 
pixel and color . 


The variables named pixel and color are used along with various parameter 
values in the pair of nested for loops shown in Listing 8 to crop the source 
picture and to copy the cropped source picture into the destination picture at 
the specified location. 


Listing 8 . Process using nested loops. 


Listing 8 . Process using nested loops. 


for(int col = 0;col < width;col+t+) { 
for(int row = 0;row < height; row++){ 
color = source.getPixel( 
col + xCoor,row + 
yCoor ).getColor(); 
pixel = 
dest.getPixel(col+xOff, row+yOfF ); 
pixel.setColor(color); 
}//end inner loop 
}//end outer loop 


}//end if 
}//end copyPicturewithCrop method 


}//end class ProbO2Runner 


Not as complicated as it looks 


Although the arithmetic operations involved in Listing 8 can be daunting, the 
code in Listing 8 is doing nothing more than replacing selected pixel colors in 
the destination picture with selected pixel colors from the source picture. 


Partially complete version of the output picture. 


If you were to display the destination picture before returning control back to 
the run method in Listing 8, you would see the image shown in Figure 6 . 


Figure 6 - Partially complete version of the output picture. 
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At this point, only one cropped version of the butterfly image has been copied 
into the beach image. 


Return control to the run method 


The copyPictureWithCrop method terminates in Listing 8 and returns 
control to the run method, picking up where Listing 6 left off. 


The remainder of the run method 


The remainder of the run method is shown in Listing 9 . 


Listing 9 . The remainder of the run method. 


Listing 9 . The remainder of the run method. 


copyPicturewithCrop(picC, picB, 161, 70,0,0,77,101); 
picB.explore(); 
Picture[] output = {picA, picB, picC}; 


return output; 
}//end run 


Call the copyPictureWithCrop method again 

Listing 9 begins by calling the copyPictureWithCrop method again. This 
time, however, the picture shown in Figure 5 is passed as the source image 
with the same picture as before being passed as the destination image. 


The offset coordinates 


In this case, the offset coordinate values specify the upper-left corner of the 
right-most butterfly image in Figure 3 . 


The cropping parameters 


The final four parameters that are passed in Listing 9 specify that the entire 
source picture is to be copied into the destination picture. 


Display the destination picture 


When the copyPictureWithCrop method returns, Listing 9 calls the explore 
method to display the current state of the destination picture. The result is 
shown in Figure 3. 


A new array object 


Finally, Listing 9 instantiates a new array object, populates it with references 
to three Picture objects, and returns control to the main method code in 


Listing 1 returning a reference to the array object in the process. 


The code in Listing 1 saves the reference to the array object in the variable 
named pictures . 


Pass Picture object references to printlIn method 


Then Listing 1 extracts and passes each of the three Picture object references 
to the println method causing the last three lines of text shown in Figure 4 to 
be displayed on the command-line screen. 


The second line of output text ( picA ) describes the raw butterfly image 
shown in Figure 1. 


The third line of output text for ( picB ) describes the beach scene shown in 
Figure 2 and Figure 3 . 


The last line of output text ( picC ) describes the cropped and flipped version 
of the butterfly image shown in Figure 5. 


Run the program 


I encourage you to copy the code from Listing 10. Compile the code and 
execute it. Experiment with the code, making changes, and observing the 
results of your changes. Make certain that you can explain why your changes 
behave as they do. 


Click here and here to download the two required input image files. 


Summary 
In this module, you learned how to: 
e¢ Work directly with individual pixels and keep track of coordinate values. 


e Copy a portion of one picture into a specific location in another picture. 
e Crop and flip a picture. 


What's next? 


You will | earn to write a program to do green-screen processing in the next 
module. 


Online video links 


Select the following links to view online video lectures on the material in this 
module. 


e ITSE 2321 Lecture 07 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


e Module name: Java OOP: Cropping, Flipping, and Combining Pictures 
e File: Junk3014.htm 

e Published: 08/01/12 

e Revised: 01/29/16 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to 
download a PDF file for this module at no charge, and also makes it possible 
for you to purchase a pre-printed version of the PDF file, you should be 
aware that some of the HTML elements in this module may not translate well 
into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 


In the past, unknown individuals have copied my modules from cnx.org, 
converted them to Kindle books, and placed them for sale on Amazon.com 
showing me as the author. I neither receive compensation for those sales nor 
do I know who does receive compensation. If you purchase such a book, 
please be aware that it is a copy of a module that is freely available on 
cnx.org and that it was made and published without my prior knowledge. 
Affiliation : | am a professor of Computer Information Technology at Austin 
Community College in Austin, TX. 


Complete program listing 


A complete listing of the program discussed in this module is shown in 
Listing 10 below. 


Listing 10 . Complete program listing. 


//Comment to prevent pdf indentation 
/*File Prob02 Copyright 2008 R.G.Baldwin 
Revised 12/16/08 


KKEKEKKKEKKEK KEKE KEK KEK KKK KKK KKK KKK KKK KEKE KKK KKK KKK KKK KEKE 


RR 


import java.awt.Color; 


public class Prob02{ 
public static void main(String[] args){ 
Picture[] pictures = new ProbO2Runner().run(); 


System.out.printin(pictures[0]); 

System.out.printiln(pictures[1]); 

System.out.printin(pictures[2]); 
}//end main method 
}//end class Prob02 


class ProbO2Runner { 


public ProbO2Runner(){//constructor 
System.out.println("Display your name here."); 

}//end constructor 

[[-------- 2 en rn r err rr rr rr rr rrr ee rere eee 


public Picture[] run(){ 
Picture picA = new Picture("Prob02a. jpg"); 
picA.explore(); 
Picture picB = new Picture("Prob02b. jpg"); 
picB.addMessage("Display your name 
here.",10,20); 
picB.explore(); 


Picture picC = cropAndFlip(picA,4,5,80,105); 
copyPicturewithCrop(picA, picB, 82, 70,4,5,77,101); 


copyPicturewWithCrop(picC, picB,161,70,0,0,77,101); 


picB.explore(); 


Picture[] output = {picA, picB, picC}; 
return output; 
}//end run 
[[------ 2-2 rer rrr nr rr re rer ee eee 


//Crops a picture to the specified coordinate 
values and 
// flips it around a vertical line at its center. 
private Picture cropAndFlip(Picture pic,int x1,int 
yi, 
int x2,int y2){ 
Picture output = new Picture(x2-x1+1, y2-y1+1)j; 


int width = output.getWidth(); 


Pixel pixel 
Color color null; 
for(int col X1;col < (x2+1);colt+t+){ 
for(int row = y1;row < (y2+1);row++){ 
color = pic.getPixel(col, row).getColor(); 
pixel = output.getPixel(width-col+x1-1, row- 


null; 


y1); 
pixel.setColor(color); 
}//end inner loop 
}//end outer loop 


return output; 
}//end crop and flip 


//Copies part of the source picture into the 
destination 
// picture with an offset on both axes after first 
// confirming that the part will fit. Does nothing 
if it 
// won't fit. 
private void copyPictureWithCrop( 
Picture source,Picture dest,int xOff, 
int yOff, 
int xCoor, 
int yCoor, 
int width, 
int height) { 


//Confirm that source will fit in destination 
if(((width+xOff) <= dest.getWidth()) && 
((height+yOff) <= dest.getHeight())){ 
Pixel pixel = null; 
Color color null; 
for(int col O;col < width;col++){ 
for(int row = 0;row < height; rowt++){ 
color = source.getPixel( 


col + xCoor,row + 
yCoor ).getColor(); 
pixel = dest.getPixel(col+xOff, row+yOfFf); 
pixel.setColor(color); 
}//end inner loop 
}//end outer loop 
}//end if 
}//end copyPicturewithCrop method 
}//end class ProbO2Runner 


-end- 
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Preface 


The elusive WYSIWYG CNXML editor 


Have you ever wished that you could use a WYSIWYG editor to create and 
publish CNXML content on OpenStax. Well, that is what I wished for in 
2009 and rather than just wish, I did something about it. I wrote an 
XHTML-to-CNXML translator program for translating XHTML files into 
CNXML files suitable for publishing on OpenStax. 


If you go to the Advanced Search feature at OpenStax CNX and search for 
an author named Richard Baldwin, you will learn that I have used my 
translator to create and publish more than 770 Books and Pages on 
OpenStax since 2009. It really does work and it is easy to use. 


How I create and publish CNXML content on OpenStax 


These are the four steps that I use to create and publish CNXML content on 
OpenStax: 


1. For each new Page, I use the free version of Microsoft Expression Web 
4 to create a valid XHTML file describing my content. This mostly 
involves the use of the built-in WYSIWYG editor in Expression Web 
4. 

2. I then process the XHTML file through my XHTML-to-CNXML 
translator named CNXMLprep12 to produce a CNXML file suitable 


for uploading to OpenStax. 
3. Then I upload the CNXML file to OpenStax. 
4. Last but not least, I publish the CNXML file on OpenStax. 


It couldn't be simpler. I do everything at the XHTML level, mostly using 
the WYSIWYG editor. I rarely touch the raw XHTML code and I never 
touch the raw CNXML code. 


I maintain all of my archives in XHTML format. When I need to update a 
page, I update the corresponding XHTML file, run it through my translator, 
upload the modified CNXML file to OpenStax, and publish it. Once again, I 
never touch the raw CNXML code either before or after uploading it to 
OpenStax. 


You too can publish CNXML content on OpenStax 


In support of my strong interest in OER and free textbooks, I have decided 
to make my translator program available for use by the general public. If 
you can create a valid XHTML file using a WYSIWYG editor such as the 
free version of Microsoft Expression Web 4, you can easily create and 
publish your content on OpenStax using my free XHTML-to-CNXML 
translator program. 


This page explains how to use my translator program to create and publish 
your content. This page also provides a link to a downloadable zip file that 
contains everything you need to get started (including an XHTML template 
file) . The one thing that the zip file doesn't include is a WYSIWYG 
XHTML editor. However, as of March 2016, you can download the free 
version of Microsoft Expression Web 4. While you should be able to use 
any WYSIWYG XHTML editor, I recommend that you use Microsoft 
Expression Web 4 because it is free and because I know that it works. 


By the way, this page was produced using that editor along with my 
translator program. 


Viewing tip 


I recommend that you open another copy of this module in a separate 
browser window and use the following links to easily find and view the 
Figures and Listings while you are reading about them. 


Figures 


e Figure 1. Required table structure. 
e Figure 2. Image in a table. 


Listings 


¢ Listing 1. Preformatted text. 


Discussion 


My translator program is named CNXMLprep1212. As you can see from the 
name, it has gone through quite a few improvements and iterations since 
2009. 


How it works 


This section contains a brief description of how the program works. If you 
don't care how it works, feel free to skip to the next section . 


The program consists of three major Java classes: 


e CNXMLprep12 
e CNXMLFirstPass12 
e CNXMLSecondPass12 


The first class in the list is the driver. 


Code in an object of the class named CNXMLFirstPass12 reads a valid 
XHTML file and performs several cleanup actions to make it easier to 
convert the XHTML file to CNXML format. It writes a temporary output 
file named CNXMLtemp.html in XHTML format in the current folder. 


Following that, code in an object of the class named 
CNXMLSecondPass12 reads the file named CNXMLtemp.html and 
translates it into CNXML code suitable for uploading to OpenStax. (See the 
section named Run the Program for instructions on how to create and 
upload a CNXML file to OpenStax.) 


Instructions regarding your XHTML code 


I assume that you will be creating content containing headers, ordinary 
paragraph text, preformatted text, ordered lists, unordered lists, blockquote, 
tables, images, and programming source code, along with other kinds of 
structures commonly found on OpenStax pages. This section contains 
guidelines on how best to create that content in your XHTML editor. 


Before going further, I need to point out that there are many CNXML tags 
that cannot be created by this program. This is not a complete WYSIWYG 
CNXML editor. Rather, it is a program designed to support a reasonable 
subset of approximately 57 tags that are available in CNXML. 


Preformatted text and program source code 


If you include program source code (such as Java or C++ source code) in 
the XHTML document, it must be placed in a preformatted block. For 
example, the code shown in Listing 1 was placed in a preformatted block in 
a table to make it easy to provide a caption and an anchor. 


Listing 1 . Preformatted text. 


out.println("<html xmlns=\"http://www.w3.org" 
+ 


"/1999/xhtml\">"); 


out.println("<head>"); 

out.println("<meta content=\"text/html; " + 
"charset=utf-8\" http-equiv=\"Content- 
Type\"/>"); 


out.printin("<title>dummy title</title>"); 


out.printlin("</head>"); 
out.println("<body>");<out.println("<body>"); 


Insert a footer at the top. It moves to the bottom. 


Table footers are optional. Although they are actually created at the top 
(below the header) , they move to the bottom in the final OpenStax display. 


There must not be any formatting code, such as bold text inside a 
preformatted block. 


All left angle brackets, quotes, and ampersands in preformatted text must be 
converted to the following entities in the raw XHTML code before 
attempting the translation into CNXML. 


Note: 


<= &lt; 


&quot; 
&amp ; 


As an alternative to placing preformatted text in a table, free-standing 
preformatted text such as the source code shown below is also allowed. Just 
be sure to deal with the left angle brackets, quotes, and ampersands as 
described above if you create free-standing preformatted text. 


import org.newdawn.slick.AppGameContainer ; 
import org.newdawn.slick.BasicGame; 

import org.newdawn.slick.GameContainer ; 
import org.newdawn.slick.Graphics; 

import org.newdawn.slick.SlickException; 


public class Slick0130a extends BasicGame{ 


//Instance variables for use in computing and 

// displaying total time since program start and 
// time for each frame. 

double totalTime = 0; 

int incrementalTime = 0; 


public Slick0130a(){ 
//Call to superclass constructor is required. 
super ("Slick0130a, Baldwin."); 

}//end constructor 

[[------ 2-2 ene nr rr rr er re er ee eee eee 


Hyperlinks 


The program translates hyperlinks to both local anchors (inside the 
document) and to external web sites. 


Of course, all hyperlink target names must be unique. 


Table considerations 


XHTML tables and CNXML tables come in many different varieties and 
formats. This program supports a subset of those varieties and formats. 


The table "width" attribute 


The XHTML table width attribute is translated into a CNXML pgwide 
attribute. Here is what the OpenStax documentation has to say about the 
pgwide attribute: 


pgwide (optional): Determines the available width of the table. 
Possible values: 


e 0 - Maximum width of the table is the galley width (default). 
¢ any positive integer - The width of the table is the entire 
width of the page. 


What this really seems to mean is that for a width value of 0, the table will 
only be wide enough to display its contents. For a width value of 1, the 
table will be the full width of the OpenStax page in the browser. 


As of March 16, this width variation only works in the Legacy view. When 
the table is viewed in the newer OpenStax view, all tables seem to be full 


width regardless of the value of width . I assume that this is an error that 
will be fixed sometime in the future. 


In this program, the table width value must be either 0 or 1. Percent (%) 
values are not allowed, nor are any values other than 0 or 1 allowed. 


The table "border" attribute 


Tables in the XHTML file must have border attribute values of either 15 or 
20. No other values are allowed in this version of the program. 


A border value of 15 results in a CNXML Note object being created as 
shown here . A border value of 20 results ina CNXML Table object as 
shown in Figure 1 . 


Structure of a simple table 


XHTML does not allow tables to be placed inside of a paragraph. Further, 
this program requires that all table objects must have the full structure 
shown in Figure 1 except that the footer section is optional and can be 
omitted. 


Figure 1. Required table structure. 


Figure 1. Required table structure. 


table border="15 or 20" width="0 or 1" 

thead 
tr 

th 

Caption text 

/th 
/tr 

/thead 


tfoot - optional 
tr 
td 
Footer text 
/td 
/tr 
/tfoot 


tbody 
tr 
td 
Table content 
/td 
/tr 
/tbody 
/table 


The easiest way to create such a table is probably to copy a table from the 
template that I will provide, paste it into your WYSIWYG editor, and then 
edit as needed. However, you should be able to create an acceptable table 
using only the WYSIWYG features of your XHTML editor if you prefer 
not to use a template. 


Although footers are created at the top, they are displayed at the bottom 
when the page is displayed in a browser. 


Structure of multi-column, multi-row tables 


I normally place my Figures and Listings in tables having a header, one 
column, one row, and optionally a footer. I provide an anchor and a caption 
in the header. Therefore, since I publish a lot Figures and Listings, I use a 
lot of tables of the sort shown in Figure 1, Figure 2, and Listing 1 


Only occasionally do I need a table with multiple columns and multiple 
rows. The template that I will provide has examples of several different 
styles of multi-column, multi-row tables. This is definitely a case where it is 
probably easier to copy, paste, and edit than to start from scratch and build 
the table. 


It is worth noting that if a single header or a single footer is created in a 
multi-column table, it normally appears above or below the first column 
with a width that is limited by the width of the column. 


Ordinary text 


All ordinary text must be in a paragraph or some other suitable element 
such as a table or a blockquote. The program won't work properly if you 
create text in your XHTML document that isn't so contained. 


XHTML headers and CNXML sections 


XHTML headers such as h1, h2, etc., are used as delimiters when creating 
sections in the CNXML code. CNXML sections begin and end at XHTML 
headers such as h1 , h2, etc. 


XHTML headers must be nested in a hierarchical manner. In other words, 
h2 must be a child of h1 , h3 must be a child of h2, etc. 


Extraneous entities 


Once you have finished editing your XHTML file, it may contain one or 
more entities that can't be handled by this program. (The most common one 
is the so-called non-breaking space entity shown below .) 


&nbsp; 


Some entities are required while others are not allowed. Any entities that 
are not allowed will be identified by error messages when you run the 
program. As far as I know, they all begin with an ampersand and end with a 
semicolon as shown above . 


The bad entities must be removed from the XHTML file before it can be 
successfully processed by this program. This is where your WYSIWYG 
editor will fail you. The only way to remove entities is to switch to the 
code-editor window of your editor program, search out the bad entities, and 
delete them. Just be sure not to delete any of the good entities in the 
process. 


Images 


Free-standing images such as the one shown below are allowed by the 
program. 
[missing_resource: ../Template%20for%20article/baldwin.jpg] 


However, if like me you often need to put captions and anchors on your 
images, such as those shown in Figure 2, you can put each image in a table 
with a border value of 20 and a width value of 0. Put the caption and the 
anchor in the table header, (or you could put the caption in the optional 
footer) . 


Figure 2. Image in a table. 


Could put a caption here. 


Don't put the anchor in the footer. If you put the anchor in the header and 
click on a link to that anchor later when viewing the page, a typical browser 
will scroll the page such that the header will be at the top of the page. Given 
that, putting the anchor in the footer doesn't work well for obvious reasons. 


All img elements must be closed with the / character. Some editors 
(including the free version of Microsoft Expression Web 4, which I use 
exclusively) don't do that. Therefore, it is necessary for me to edit the raw 
XHTML code to add those / characters to the img elements. 


Validating your XHTML file 


Validate your finished XHTML file as XHTML 1.0 Transitional using any 
good XHTML validator. The free version of Microsoft Expression Web 4 
has a built-in validator and it is not necessary to put a DTD declaration in 
your XHTML file. 


Some validation software may require that you include a DTD declaration 
at the top of your XHTML file in order to validate the file. If that is the case 
with your validator, you MUST remove the DTD declaration from the 
XHTML file before using the file as input to this program. 


Don't use XHTML break tags 


Break tags are used in XHTML to create a series of lines of text with no 
space in between. An XHTML break tag looks like this: 


<br/> 


To my knowledge, there is no CNXML tag that maps into an XHTML 
break tag. Therefore, there must not be any XHTML break tags in the 
temporary output file produced by an object of the class named 
CNXMLFirstPass12 . The behavior of an object of that class is to replace 
all XHTML break tags with XHTML paragraph tags. Although this works 
in some cases, it can also cause "well formed" errors later downstream in 
other cases. 


The best approach is to manually remove all XHTML break tags from your 
finished XHTML file before processing it with this program. In other 
words, DON'T USE XHTML break tags in your XHTML file unless it is 
absolutely necessary. 


CNXML editing is not required 


It should not be necessary for you to manually edit the CNXML file 
produced by this program either before or after uploading it to OpenStax. If 
there are problems with the upload of the CNXML file, or problems with 
the published result, it should be possible for you to make any necessary 
corrections at the XHTML level. Then re-run this program to create a new 
CNXML file for uploading. I have been doing that since 2009 and with 
more than 770 books and pages published on OpenStax, I have never found 
it necessary to edit CNXML code. 


No CNXML Figure objects or CNXML Listing objects 


Early versions of this program supported both CNXML Figure objects and 
CNXML Listing objects. Although those objects sound good in theory, I 


encountered significant display problems with objects of those types, 
particularly when the site moved from the Legacy presentation format to the 
OpenStax presentation format. As a result of those problems, I had to go 
back and remove those objects from most of my pages. Following that, I 
updated the program to disallow the creation of CNXML code for those 
objects. 


My approach, which works very well form me, is to put Figures and 
Listings into CNXML Table objects and to distinguish between Figures and 
Listings in the captions, which I place in the table header. 


Run the program 


This section explains how to run the program and how to publish your 
CNXML content on OpenStax. 


Running the program 


This program requires access to the following three compiled Java class 
files plus a valid XHTML file for input 


¢ CNXMLprep12.class 
e CNXMLFirstPass12.class 
e CNXMLSecondPass12.class 


Click here to download a zip file named CNXMLtemplate01.zip 
containing those three class files, a valid XHTML template file named 
CNXMLtemplate01.htm that illustrates many of the capabilities of this 
program, and several image files associated with the template file. 


To run this program, extract the contents of the zip file into an empty folder. 
Then make that folder the current folder and execute the following 
command at the command prompt: 


java CNXMLprep12 CNXMLtemplate01.htm YourOutputFileName.cnxml 


Of course in order for this to work, you must have the Java virtual machine 
installed on your computer. (Click here to learn more than you ever wanted 
to know about Java.) 


Two new files should appear in the folder: 


¢ CNXMLtemp.html 
e¢ YourOutputFileName.cnxml 


You can ignore the temp file. It is of no further use. 


Upload and publish your new page 
Click here to create an OpenStax account and sign in to your new account. 


Create a new workgroup or use the workgroup named Personal 
Workspace to create a new module . 


In the days when the website was known as Connexions , before 
it became known as OpenStax , individual CNXML files were 
known as Modules and a collection of such files was known as a 
Collection . With the advent of the OpenStax name, individual 
CNXML files became known as Pages , and collections of such 
files became known as Books . However, much of the old 
terminology has not disappeared from the website, particular in 
those area of the site associated with creating and publishing 
content. Therefore, you will be creating a Module , which will be 
know as a Page once it is published and viewed in the OpenStax 
format. However, if you view it in the Legacy format (link on the 
upper-right corner of the Page screen) , it will be known as a 
Module . 


Enter the Metadata for the new module (title, keywords, summary, etc.) 


Upload the file named YourOutputFileName.cnxml to OpenStax as type 
Plain CNXML . 


Put any required image files or other resource files in a zip file and upload it 
to OpenStax as type Zip File . 


Note that the XHTML code must be written so as to access the 
image files and other resource files from within the same folder 
as the file named CNXMLtemplate01.htm . References to 
resource files in other folders are not allowed. 


Then follow the OpenStax instructions to publish your new content. 


The utf8 character set 


The XHTML input file must be coded as charset=utf8 . Be careful with 
this requirement because some XHTML editors create text using other 
character sets. The safest approach is to start with my XHTML template file 
that contains a meta line in the head section that looks something like the 
following: 


<,.,.charset=utf-8...> 


Then edit that template file to meet the needs of your page. 


Summary 


If you can create a valid XHTML file using a WYSIWYG editor such as 
the free version of Microsoft Expression Web 4, you can easily create and 
publish content on OpenStax using my free XHTML-to-CNXML translator 
program. This page explains how to use my translator program to create and 
publish your first page on OpenStax. 


Miscellaneous 


This section contains a variety of miscellaneous information. 


Note: Housekeeping material 


e Module name: WYSIWY0100 Getting Started 
e File: WYSIWY0100.htm 
e Published: 03/18/16 


Note: Disclaimers: 

Financial : Although the Connexions site makes it possible for you to 
download a PDF file for this module at no charge, and also makes it 
possible for you to purchase a pre-printed version of the PDF file, you 
should be aware that some of the HTML elements in this module may not 
translate well into PDF. 

I also want you to know that, I receive no financial compensation from the 
Connexions website even if you purchase the PDF version of the module. 
In the past, unknown individuals have copied my modules from cnx.org, 
converted them to Kindle books, and placed them for sale on Amazon.com 
showing me as the author. I neither receive compensation for those sales 
nor do I know who does receive compensation. If you purchase such a 
book, please be aware that it is a copy of a module that is freely available 
on cnx.org and that it was made and published without my prior 
knowledge. 

Affiliation : I am a professor of Computer Information Technology at 
Austin Community College in Austin, TX. 


-end- 


junk pdf hosting test 
junk this is a test of hosting pdf files on OpenStax 


This page is designed specifically to host a PDF file. 
Click here to view the PDF file 


-end- 


JunkTableWidthTest 
A module to compare the effect of pgwide in Rewrite and Legacy 


JUNK JUNK JUNK 


Table width test. 


The following table has a width value of 0 


Figure 1. 0. 


The following table has a width value of 1. 


Figure 2. 1. 


Figure 2. 1. 


The following table has a width value of 0. 


Figure 3. 0. 


Four score and seven years ago... 


The following table has a width value of 1. 


Figure 4. 1. 


Four score and seven years ago... 


-end- 


